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

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

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

<p id="text">こんにちは、</p>
<ul id="list"></ul>

// createTextNode() でテキストノードを作成してHTML要素に追加します。
var textNode = document.createTextNode("世界！");
var text = document.querySelector("#text");
text.appendChild(textNode);

// HTMLタグを含む文字列もそのまま表示されます。XSSの危険がありません。
var safeNode = document.createTextNode("<script>alert('危険')</script>");
text.appendChild(safeNode);

// createDocumentFragment() で複数のHTML要素をまとめて追加します。
var fragment = document.createDocumentFragment();
var items = ["りんご", "みかん", "ぶどう"];
items.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	fragment.appendChild(li); // フラグメントに追加します。DOMの更新は発生しません。
});
var list = document.querySelector("#list");
list.appendChild(fragment); // ここで1回だけDOMが更新されます。

上記のコードを実行すると、HTMLは以下のように変化します。

<!-- 実行前 -->
<p id="text">こんにちは、</p>
<ul id="list"></ul>

<!-- 実行後 -->
<p id="text">こんにちは、世界！&lt;script&gt;alert('危険')&lt;/script&gt;</p>
<ul id="list">
	<li>りんご</li>
	<li>みかん</li>
	<li>ぶどう</li>
</ul>

『document.createTextNode()』で作成したテキストノードはHTMLタグが解釈されず、文字列としてそのまま画面に表示されます。

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

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

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