JavaScript Document createDocumentFragment() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word CREATEDOCUMENTFRAGMENT

Definition

document.createDocumentFragment() creates a new empty DocumentFragment — a lightweight, offscreen container for DOM nodes. Build children on the fragment, then append the fragment once; the fragment is replaced by its children in the live tree.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.createDocumentFragment. Start with this line.

JavaScript
document.createDocumentFragment()
CallWhat it does
document.createDocumentFragment()Primary signature.
document.createDocumentFragment(...)Call with the arguments your case needs.

Built into the browser. Call createDocumentFragment(...) on document — no import required.

Library declarations
JavaScript
document.createDocumentFragment()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Empty DocumentFragment ready for children

JavaScript Examples

Example 1 — Batch List Items (MDN-style)

Build list items on a fragment, then append once to a live <ul>.

JavaScript
const ul = document.createElement("ul");
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

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

ul.appendChild(fragment);
console.log(ul.children.length); // 4
console.log([...ul.children].map((li) => li.textContent).join(", "));
// Firefox, Chrome, Opera, Safari
Try It Yourself

How It Works

  1. Create a host. An empty <ul> will receive the items.
  2. Create a fragment. It starts empty and stays offscreen.
  3. Build children. Each <li> is appended to the fragment, not the live list.
  4. One insert. ul.appendChild(fragment) moves all four items into ul.

Example 2 — Fragment Empties After Append

After append, children live under the parent — the fragment is empty.

JavaScript
const parent = document.createElement("div");
const fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement("span"));
fragment.appendChild(document.createElement("span"));

console.log(fragment.childNodes.length); // 2
parent.appendChild(fragment);
console.log(fragment.childNodes.length); // 0
console.log(parent.childNodes.length); // 2
Try It Yourself

How It Works

  1. Fill the fragment. Two spans sit in the offscreen container.
  2. Count before. fragment.childNodes.length is 2.
  3. Append. Children move into parent; the fragment is not kept as a wrapper.
  4. Count after. Fragment is 0; parent is 2.

Example 3 — new DocumentFragment()

MDN also allows the constructor; the result is the same kind of empty fragment.

JavaScript
const a = document.createDocumentFragment();
const b = new DocumentFragment();

console.log(a.nodeType); // 11
console.log(b.nodeType); // 11
console.log(a.nodeName); // "#document-fragment"
console.log(b.constructor === a.constructor); // true
Try It Yourself

How It Works

  1. Method form. createDocumentFragment() is the Document API.
  2. Constructor form. new DocumentFragment() also yields an empty fragment.
  3. Same type. Both report nodeType 11.
  4. Pick one. Either style is fine; this tutorial focuses on the Document method.
Compatibility

Browser Support

Document.createDocumentFragment() is a browser DOM API marked Baseline Widely available on MDN (since July 2015).

✓ Baseline Widely available

Document.createDocumentFragment()

Supported in Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer. Returns an empty DocumentFragment ready for offscreen building.

Baseline Widely available
Google Chrome All modern versions
Yes
Microsoft Edge All modern versions
Yes
Mozilla Firefox All modern versions
Yes
Apple Safari All modern versions
Yes
Opera All modern versions
Yes
Internet Explorer IE 6+
Yes
createDocumentFragment() Excellent in browsers

Bottom line: Safe to use in modern and legacy browsers. See the MDN createDocumentFragment() reference.

Frequently Asked Questions

It creates a new empty DocumentFragment — an offscreen container for DOM nodes. Build children on the fragment, then append the fragment once so all children move into the live tree.
No. MDN marks Document.createDocumentFragment() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
The fragment is replaced by its children. The fragment itself is not left as a wrapper in the tree — its child nodes move to the parent, and the fragment becomes empty.
Both create an empty fragment. MDN notes you can also use the DocumentFragment constructor. createDocumentFragment() is the classic Document instance method.
You build nodes offscreen (not in the main DOM tree), then insert them in one step. That can reduce layout work when adding many nodes — especially helpful in older engines.
Node.DOCUMENT_FRAGMENT_NODE, which is 11. nodeName is "#document-fragment".

Next: createElement()

Learn how to create HTML elements with document.createElement().

createElement() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document createComment() Method JavaScript Document createElement() Method