Document: createDocumentFragment() method

Baseline Widely available

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

Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree.

Syntax

js
createDocumentFragment()

Parameters

None.

Return value

A newly created, empty, DocumentFragment object, which is ready to have nodes inserted into it.

Usage notes

DocumentFragments are DOM Node objects which 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, using document fragments could result in better performance in some older engines.

You can also use the DocumentFragment constructor to create a new fragment:

js
const fragment = new DocumentFragment();

Examples

This example creates a list of major web browsers in a DocumentFragment, then adds the new DOM subtree to the document to be displayed.

HTML

html
<ul id="ul"></ul>

JavaScript

js
const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

Result

Specifications

Specification
DOM
# ref-for-dom-document-createdocumentfragment①

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createDocumentFragment

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also