JavaScript Document createDocumentFragment() Method

What You’ll Learn

document.createDocumentFragment() is an instance method that returns an empty DocumentFragment — a lightweight, offscreen container for building DOM subtrees (see MDN Document: createDocumentFragment()). Learn batch insertion, why the fragment disappears after appendChild, the MDN browser-list example, and new DocumentFragment() as an alternative — with five try-it labs.

Introduction

When you need to add many nodes to the page, appending each one directly to a live container can trigger repeated layout work. A common pattern is:

1. Create a DocumentFragment with createDocumentFragment().
2. Build your elements on the fragment (offscreen).
3. Append the fragment to the live DOM once.

MDN: DocumentFragments are DOM node objects which are never part of the main DOM tree. When you append the fragment, it is replaced by all its children.

Related tutorials: append(), nodeType, createComment().

Understanding document.createDocumentFragment()

An instance method on any Document object, including the live page document (MDN).

• Parameters — none (MDN).
• Return value — a new, empty DocumentFragment (MDN).
• nodeType — Node.DOCUMENT_FRAGMENT_NODE (11).
• nodeName — "#document-fragment".
• Not in main tree — lives in memory until inserted (MDN).
• On append — fragment replaced by its children (MDN).

📝 Syntax

General form of Document.createDocumentFragment (MDN):

createDocumentFragment()

Parameters

None.

Return value

A newly created, empty, DocumentFragment object (MDN).

Alternative constructor (MDN)

const fragment = new DocumentFragment();

MDN browser list example

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

⚖️ createDocumentFragment vs related patterns

Examples Gallery

Examples follow MDN Document: createDocumentFragment() and show batch DOM building patterns.

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

<ul id="ul">
  <li>Firefox</li>
  <li>Chrome</li>
  <li>Opera</li>
  <li>Safari</li>
</ul>

const tbody = document.querySelector("#data tbody");
const fragment = document.createDocumentFragment();
const rows = [
  ["Alice", "42"],
  ["Bob", "37"]
];

rows.forEach(([name, score]) => {
  const tr = document.createElement("tr");
  tr.innerHTML = `<td>${name}</td><td>${score}</td>`;
  fragment.appendChild(tr);
});

tbody.appendChild(fragment);
console.log(tbody.rows.length); // 2

2

const fragment = document.createDocumentFragment();

console.log(fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE); // true
console.log(fragment.nodeName); // "#document-fragment"
console.log(fragment.childNodes.length); // 0

true
#document-fragment
0

const host = document.getElementById("host");
const fragment = document.createDocumentFragment();

fragment.appendChild(document.createElement("p"));
fragment.appendChild(document.createElement("p"));

console.log("before:", fragment.childNodes.length); // 2

host.appendChild(fragment);

console.log("after:", fragment.childNodes.length); // 0
console.log("host children:", host.childNodes.length); // 2

before: 2
after: 0
host children: 2

const viaMethod = document.createDocumentFragment();
const viaConstructor = new DocumentFragment();

viaMethod.append(document.createElement("span"));
viaConstructor.append(document.createElement("span"));

console.log(viaMethod.childNodes.length); // 1
console.log(viaConstructor.childNodes.length); // 1
console.log(viaMethod.nodeType === viaConstructor.nodeType); // true

1
1
true

🚀 Common Use Cases

• Dynamic lists — MDN browser list pattern with many <li> items.
• Table bodies — batch-build <tr> rows before inserting.
• Virtual scrolling prep — assemble a chunk of nodes offscreen.
• Template rendering — build a subtree, then attach once.
• Performance — MDN: can help in older engines by reducing reflows.
• Not a visible element — fragments never render; only their children do.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• No parameters — always returns an empty fragment.
• Fragments are offscreen; not part of the main DOM tree while building (MDN).
• After insertion, fragment.childNodes is typically empty.
• nodeType is 11 (DOCUMENT_FRAGMENT_NODE).
• Related: append(), nodeType, createComment().

💡 Best Practices