document.createTextNode() / createDocumentFragment()

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

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

sample_createTextNode.html

<p id="text">Hello, </p>
<ul id="list"></ul>
<div id="safe-output"></div>
<ul id="fragment-list"></ul>

sample_createTextNode.js

// Pattern 1: Basic usage of createTextNode()
var textNode = document.createTextNode("World!");
var text = document.getElementById("text");
text.appendChild(textNode);
// Result: "Hello, World!" is displayed.

// Pattern 2: Safe text insertion as an XSS countermeasure
// Using createTextNode() disables HTML tags in the string.
var safeDiv = document.getElementById("safe-output");
var userInput = "<img src=x onerror=alert('XSS')> Son Goku";
var safeNode = document.createTextNode(userInput);
safeDiv.appendChild(safeNode);
// Result: The HTML tags are displayed as plain text — no XSS occurs.

// Pattern 3: Use createDocumentFragment() to batch-append many elements efficiently
// Even 1000 items only trigger one DOM update.
var fragment = document.createDocumentFragment();
var warriors = ["Son Goku", "Vegeta", "Bulma", "Krillin", "Piccolo"];
warriors.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	fragment.appendChild(li); // Appending to a fragment does not update the DOM.
});
var list = document.getElementById("list");
list.appendChild(fragment); // The DOM is updated only once here.

// Pattern 4: Modify a text node's content after creation
var fragList = document.getElementById("fragment-list");
var item = document.createElement("li");
var node = document.createTextNode("Son Goku");
item.appendChild(node);
fragList.appendChild(item);
node.nodeValue = "Super Saiyan Son Goku"; // Modify the text node's content.
// Result: "Super Saiyan Son Goku" is displayed in the list.

View sample page

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.