Creates a new empty DocumentFragment
.
Syntax
var docFragment = document.createDocumentFragment();
docFragment
is a reference to an empty DocumentFragment
object.
Description
DocumentFragment
s are DOM Nodes. They are newer 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
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 | ? | ? | ? | ? | ? |