Document.createDocumentFragment()

Creates a new empty DocumentFragment.

Syntax

JavaScript
var <var>docFragment</var> = document.createDocumentFragment();

docFragment is a reference to an empty DocumentFragment object.

Description

DocumentFragments are DOM Nodes. They 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, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

Example

JavaScript
var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Firefox", "Safari",
    "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// a list with well-known web browsers

Specifications

Specification Status Comment
DOM
The definition of 'Document.createDocumentFragment()' in that specification.
Living Standard No change
DOM4
The definition of 'Document.createDocumentFragment()' in that specification.
Recommendation Clarifies that the node document of the created document fragment is the context object.
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Document.createDocumentFragment()' in that specification.
Recommendation No change
Document Object Model (DOM) Level 2 Core Specification
The definition of 'Document.createDocumentFragment()' in that specification.
Recommendation No change
Document Object Model (DOM) Level 1 Specification
The definition of 'Document.createDocumentFragment()' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/document/createdocumentfragment

API Document DOM Method Reference