The createDocumentFragment() method creates a lightweight, off-screen container for building or modifying groups of DOM nodes. You assemble the changes inside the fragment and then append it to the document in one efficient operation, avoiding unnecessary reflows and protecting the live DOM structure.
Syntax
document.createDocumentFragment()Parameters: This method does not accept any parameter.Â
Return Value: It returns the created DocumentFragment node.Â
Example
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM createDocumentFragment() Method</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>DOM createDocumentFragment() Method</h3>
<p>
Click on the button to change
list element
</p>
<ul>
<li>Data Structure</li>
<li>Operating System</li>
<li>C Programming</li>
<li>DBMS</li>
</ul>
<!--Driver Code Ends-->
<button onclick="myGeeks()">Click Here!</button>
<script>
function myGeeks() {
let doc = document.createDocumentFragment();
doc.appendChild(document.getElementsByTagName("li")[0]);
doc.childNodes[0].childNodes[0].nodeValue = "SQL";
document.getElementsByTagName("ul")[0].appendChild(doc);
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- Builds an off screen DOM subtree : Nodes are added to the fragment in memory without touching the live page, so the browser doesnât perform reflows or repaints until the finished fragment is inserted.
- Children are moved, not copied : When you append the fragment to the document, its child nodes are transferred into the live DOM and the fragment itself becomes empty.
