document.createTextNode() / createDocumentFragment()

// テキストノードを作成します。
var textNode = document.createTextNode("テキスト");

// ドキュメントフラグメントを作成します。
var fragment = document.createDocumentFragment();

sample_createTextNode.html

<p id="text">こんにちは、</p>
<ul id="list"></ul>
<div id="safe-output"></div>
<ul id="fragment-list"></ul>

sample_createTextNode.js

// パターン1: createTextNode() の基本的な使い方
var textNode = document.createTextNode("世界！");
var text = document.getElementById("text");
text.appendChild(textNode);
// 結果: 「こんにちは、世界！」と表示されます。

// パターン2: XSS対策としての安全なテキスト挿入
// textContent ではなく createTextNode() を使うと、HTMLタグが無効化されます。
var safeDiv = document.getElementById("safe-output");
var userInput = "<img src=x onerror=alert('XSS')> 孫悟空";
var safeNode = document.createTextNode(userInput);
safeDiv.appendChild(safeNode);
// 結果: HTMLタグがそのまま文字列として表示されます。XSSは発生しません。

// パターン3: createDocumentFragment() で大量のHTML要素を効率よく追加する
// 1000件追加してもDOMの更新は1回だけです。
var fragment = document.createDocumentFragment();
var warriors = ["孫悟空", "ベジータ", "ブルマ", "クリリン", "ピッコロ"];
warriors.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	fragment.appendChild(li); // フラグメントへの追加はDOMを更新しません。
});
var list = document.getElementById("list");
list.appendChild(fragment); // ここで1回だけDOMが更新されます。

// パターン4: テキストノードの内容を後から変更する
var fragList = document.getElementById("fragment-list");
var item = document.createElement("li");
var node = document.createTextNode("孫悟空");
item.appendChild(node);
fragList.appendChild(item);
node.nodeValue = "超サイヤ人・孫悟空"; // テキストノードの内容を変更します。
// 結果: リストに「超サイヤ人・孫悟空」と表示されます。

サンプルページはこちら

『document.createTextNode()』はテキストのみのノードを作成するメソッドです。作成されたテキストノードはHTMLタグを一切解釈しないため、ユーザーの入力値を安全に画面に表示する手段として使えます。『HTML要素.textContent』と同様に、XSSの危険がない安全な方法です。

『document.createDocumentFragment()』はDOMに属さない軽量なコンテナを作成するメソッドです。通常、HTML要素をDOMに追加するたびにブラウザはレイアウトの再計算と再描画を行います。フラグメントにまとめてから1回で挿入すると、DOM操作が1回で済むため、大量のHTML要素を追加する際のパフォーマンスが大幅に向上します。

フラグメントをDOMに挿入すると、フラグメント自身はDOMに追加されず、中身のHTML要素だけが挿入されます。『document.createElement()』で作成したHTML要素とは異なり、余計なラッパー要素が残ることはありません。