Web/API/DocumentFragment

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 (even on reflow) or incur any performance impact when changes are made.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="346" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DocumentFragment</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

DocumentFragment(): Creates and returns a new DocumentFragment object.

Properties

This interface has no specific properties, but inherits those of its parent, Node, and implements those of the ParentNode interface.

ParentNode.children Read only ': Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment object.
ParentNode.firstElementChild Read only ': Returns the Element that is the first child of the DocumentFragment object, or null if there is none.
ParentNode.lastElementChild Read only ': Returns the Element that is the last child of the DocumentFragment object, or null if there is none.
ParentNode.childElementCount Read only ': Returns an unsigned long giving the amount of child elements the DocumentFragment has.

Methods

This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.querySelector(): Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll(): Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.
DocumentFragment.getElementById(): 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() or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content property.

An empty DocumentFragment can be created using the document.createDocumentFragment() method or the constructor.

Example

HTML

<ul id="list"></ul>

JavaScript

var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

Result

Specifications

Specification	Status	Comment
DOMThe definition of 'DocumentFragment' in that specification.	Living Standard	Added the constructor and the implementation of `ParentNode`.
Selectors API Level 1The definition of 'DocumentFragment' in that specification.	Obsolete	Added the `querySelector()` and `querySelectorAll()` methods.
Document Object Model (DOM) Level 3 Core SpecificationThe definition of 'DocumentFragment' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core SpecificationThe definition of 'DocumentFragment' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 SpecificationThe definition of 'DocumentFragment' in that specification.	Obsolete	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DocumentFragment`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 8	Safari Full support 3	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
`DocumentFragment()` constructor Experimental'	Chrome Full support 28	Edge Full support ≤18	Firefox Full support 24	IE No support No	Opera Full support 15	Safari Full support 8	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 24	Opera Android Full support Yes	Safari iOS Full support 8	Samsung Internet Android Full support Yes
`ParentNode` methods Experimental'	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`ParentNode` properties Experimental'	Chrome Full support 28	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 15	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 25	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support Yes
`querySelector`	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 9	Opera Full support 10	Safari Full support 3.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android Full support Yes
`querySelectorAll`	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 9	Opera Full support 10	Safari Full support 3.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.