Should I use document.createDocumentFragment or document.createElement

Question

I was reading about document fragments and the DOM, and wondered how document.createDocumentFragment is different from document.createElement , because it looks like none of them exist in the DOM until I add them to the DOM element.

I did a test (below), and they all took exactly the same time (about 95 ms). This is probably possible due to the fact that the style does not apply to any of the elements, so there may be no possibility of melting.

In any case, based on the example below, why should I use createDocumentFragment instead of createElement when pasting into the DOM and what is the difference between the two.

 var htmz = "<ul>"; for (var i = 0; i < 2001; i++) { htmz += '<li><a href="#">link ' + i + '</a></li>'; } htmz += '<ul>'; //createDocumentFragment console.time('first'); var div = document.createElement("div"); div.innerHTML = htmz; var fragment = document.createDocumentFragment(); while (div.firstChild) { fragment.appendChild(div.firstChild); } $('#first').append(fragment); console.timeEnd('first'); //createElement console.time('second'); var span = document.createElement("span"); span.innerHTML = htmz; $('#second').append(span); console.timeEnd('second'); //jQuery console.time('third'); $('#third').append(htmz); console.timeEnd('third'); 

Answer 1

The difference is that the document fragment effectively disappears when you add it to the DOM. It happens that all the child nodes of a document fragment are inserted into the DOM place where you insert the document fragment, and the document fragment itself is not inserted. The fragment itself continues to exist, but now it has no children.

This allows multiple nodes to be inserted into the DOM simultaneously:

 var frag = document.createDocumentFragment(); var textNode = frag.appendChild(document.createTextNode("Some text")); var br = frag.appendChild(document.createElement("br")); var body = document.body; body.appendChild(frag); alert(body.lastChild.tagName); // "BR" alert(body.lastChild.previousSibling.data); // "Some text" alert(frag.hasChildNodes()); // false 

Answer 2

Another very important difference between creating an element and a document fragment:

When you create an element and add it to the DOM, this element is added to the DOM, as well as to the child elements.

Only children are added with the document fragment.

Take the case:

 var ul = document.getElementById("ul_test"); // First. add a document fragment: (function() { var frag = document.createDocumentFragment(); var li = document.createElement("li"); li.appendChild(document.createTextNode("Document Fragment")); frag.appendChild(li); ul.appendChild(frag); console.log(2); }()); (function() { var div = document.createElement("div"); var li = document.createElement("li"); li.appendChild(document.createTextNode("Inside Div")); div.appendChild(li); ul.appendChild(div); }()); 

 Sample List: <ul id="ul_test"></ul> 

leading to this incorrect HTML (space added)

 <ul id="ul_test"> <li>Document Fragment</li> <div><li>Inside Div</li></div> </ul>