createDocumentFragment (W3C DOM Core method)

Version Depr. Static
DOM1 No No
Browser support (more…)
IE6+ FF1.5+ SA1.3+ OP9+
Full Full Full Full


var fragment = document.createDocumentFragment();

var contents = fragment.appendChild(document.createElement('blockquote'));
contents = contents.appendChild(document.createElement('p'));
contents.appendChild(document.createTextNode('Always two there are'));


The example above creates a DocumentFragment node, and populates it using createElement, createTextNode and appendChild. The document fragment is then added to an element using appendChild, which adds its contents but not the fragment itself.

So if the element in question were an empty HTML div element:


Then the operation above would produce this result:

<div><blockquote><p>Always two there are</p></blockquote></div>


No arguments


Create an empty DocumentFragment node.

The created document fragment can then be populated using Node methods such as appendChild or insertBefore, and finally added to a document using the same methods. Only the contents will be added, the document fragment itself will not — document fragment is a virtual construct and never actually exists in a document.

Return value

The created document fragment node.


Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.5 2.0 3.0 1.3 2.0 3.0 9.0 9.5
Partial Full Full Full Full Full Full Full Full Full Full

Internet Explorer 5.5 in HTML doesn't implement this method (it returns undefined).

User-contributed notes

There are no comments yet.

Related Products