Document: createDocumentFragment() method
Creates a new empty DocumentFragment
into which
DOM nodes can be added to build an offscreen DOM tree.
Syntax
createDocumentFragment()
Parameters
None.
Return value
A newly created, empty, DocumentFragment
object, which is ready to have
nodes inserted into it.
Usage notes
DocumentFragment
s are DOM Node
objects which are never part
of the main DOM tree. The usual use case is to create the document fragment, append
elements to the document fragment and then append the document fragment to the DOM tree.
In the DOM tree, the document fragment is replaced by all its children.
Since the document fragment is in memory and not part of the main DOM tree, using document fragments could result in better performance in some older engines.
You can also use the DocumentFragment
constructor to create a new
fragment:
const fragment = new DocumentFragment();
Examples
This example creates a list of major web browsers in a DocumentFragment
,
then adds the new DOM subtree to the document to be displayed.
HTML
<ul id="ul"></ul>
JavaScript
const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];
browsers.forEach((browser) => {
const li = document.createElement("li");
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
Result
Specifications
Specification |
---|
DOM Standard # ref-for-dom-document-createdocumentfragment① |
Browser compatibility
BCD tables only load in the browser