DocumentFragment

BaselineWidely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

TheDocumentFragment interface represents a minimal document object that has no parent.

It is used as a lightweight version ofDocument 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.

Constructor

DocumentFragment(): Creates and returns a newDocumentFragment object.

Instance properties

This interface has no specific properties, but inherits those of its parent,Node.

DocumentFragment.childElementCountRead only: Returns the amount of childelements theDocumentFragment has.
DocumentFragment.childrenRead only: Returns a liveHTMLCollection containing all objects of typeElement that are children of theDocumentFragment object.
DocumentFragment.firstElementChildRead only: Returns theElement that is the first child of theDocumentFragment object, ornull if there is none.
DocumentFragment.lastElementChildRead only: Returns theElement that is the last child of theDocumentFragment object, ornull if there is none.

Instance methods

This interface inherits the methods of its parent,Node.

DocumentFragment.append(): Inserts a set ofNode objects or strings after the last child of the document fragment.
DocumentFragment.prepend(): Inserts a set ofNode objects or strings before the first child of the document fragment.
DocumentFragment.querySelector(): Returns the firstElement node within theDocumentFragment, in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll(): Returns aNodeList of all theElement nodes within theDocumentFragment that match the specified selectors.
DocumentFragment.moveBefore()Experimental: Moves a given Node inside the invokingDocumentFragment as a direct child, before a given reference node, without removing and then inserting the node.
DocumentFragment.replaceChildren(): Replaces the existing children of aDocumentFragment with a specified new set of children.
DocumentFragment.getElementById(): Returns the firstElement node within theDocumentFragment, in document order, that matches the specified ID. Functionally equivalent toDocument.getElementById().

Usage notes

A common use forDocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM usingNode interface methods such asappendChild(),append(), orinsertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an emptyDocumentFragment.

This interface is also of great use with Web components:<template> elements contain aDocumentFragment in theirHTMLTemplateElement.content property.

An emptyDocumentFragment can be created using thedocument.createDocumentFragment() method or the constructor.

Performance

The performance benefit ofDocumentFragment is often overstated. In fact, in some engines, using aDocumentFragment is slower than appending to the document in a loop as demonstrated inthis 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

const ul = document.querySelector("ul");const fruits = ["Apple", "Orange", "Banana", "Melon"];const fragment = new DocumentFragment();for (const fruit of fruits) {  const li = document.createElement("li");  li.textContent = fruit;  fragment.append(li);}ul.append(fragment);