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 emptyDocumentFragment into whichDOM nodes can be added to build an offscreen DOM tree.

Syntax

createDocumentFragment()

Return value

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

DocumentFragments are DOMNode objects which are never partof the main DOM tree. The usual use case is to create the document fragment, appendelements 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 isin memory and not part of the main DOM tree,using document fragments could result inbetter performancein some older engines.

You can also use theDocumentFragment constructor to create a newfragment:

const fragment = new DocumentFragment();

Examples

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

HTML

html

<ul></ul>

JavaScript

const element = document.getElementById("ul"); // assuming ul existsconst 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);