The DocumentFragment interface represents a minimal document object that has no parent.
It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document.
Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID. Functionally equivalent to Document.getElementById().
Usage notes
A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild(), append(), or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment.
This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content property.
The performance benefit of DocumentFragment is often overstated. In fact, in some engines, using a DocumentFragment is slower than appending to the document in a loop as demonstrated in this benchmark. However, the difference between these examples is so marginal that it's better to optimize for readability than performance.
Example
HTML
html
<ul></ul>
JavaScript
js
const ul = document.querySelector("ul");const fruits =["Apple","Orange","Banana","Melon"];const fragment =newDocumentFragment();for(const fruit of fruits){const li = document.createElement("li");
li.textContent = fruit;
fragment.append(li);}
ul.append(fragment);