document.createTextNode() / createDocumentFragment() Since: DOM Level 1（1998）

Methods for creating a text node or a document fragment. document.createTextNode() creates a text-only node, and document.createDocumentFragment() creates a lightweight container for batching multiple HTML elements before inserting them into the DOM.

Syntax

// Creates a text node.
var textNode = document.createTextNode("text");

// Creates a document fragment.
var fragment = document.createDocumentFragment();

Method list

Method	Description
document.createTextNode("text")	Creates a text node containing the specified string. HTML tags are not interpreted — the string is treated as plain text.
document.createDocumentFragment()	Creates an empty document fragment. Adding child elements to the fragment and then inserting it into the DOM requires only a single DOM operation, which improves performance.

Sample code

<p id="text">Hello, </p>
<ul id="list"></ul>

// Creates a text node with createTextNode() and appends it to an element.
var textNode = document.createTextNode("World!");
var text = document.querySelector("#text");
text.appendChild(textNode);

// Strings containing HTML tags are displayed as-is — no XSS risk.
var safeNode = document.createTextNode("<script>alert('danger')</script>");
text.appendChild(safeNode);

// Uses createDocumentFragment() to batch-append multiple elements at once.
var fragment = document.createDocumentFragment();
var items = ["Apple", "Orange", "Grape"];
items.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	fragment.appendChild(li); // Appends to the fragment — no DOM update occurs yet.
});
var list = document.querySelector("#list");
list.appendChild(fragment); // The DOM is updated only once here.

Overview

document.createTextNode() is a method that creates a text-only node. Because the created text node never interprets HTML tags, it is a safe way to display user input on screen. Like element.textContent, it is an XSS-safe approach.

document.createDocumentFragment() is a method that creates a lightweight container that does not belong to the DOM. Normally, every time you add an element to the DOM the browser recalculates layout and repaints. By collecting elements in a fragment and inserting them all at once, you reduce DOM operations to a single step, which significantly improves performance when adding a large number of elements.

When a fragment is inserted into the DOM, the fragment itself is not added — only its child elements are inserted. Unlike elements created with document.createElement(), no extra wrapper element is left behind.