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

テキストノードやドキュメントフラグメントを作成するメソッドです。『document.createTextNode()』はテキストのみのノードを作成し、『document.createDocumentFragment()』は複数のHTML要素をまとめて追加するための軽量な入れ物を作成します。

構文

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

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

メソッド一覧

メソッド	概要
document.createTextNode("テキスト")	指定した文字列を含むテキストノードを作成します。HTMLタグは解釈されず、文字列としてそのまま扱われます。
document.createDocumentFragment()	空のドキュメントフラグメントを作成します。フラグメントに子要素を追加してからDOMに挿入すると、DOM操作が1回で済むためパフォーマンスが向上します。

サンプルコード

<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が更新されます。

概要

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

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

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