Document.createDocumentFragment()

空の DocumentFragment を新しく作成します。

構文

var docFragment = document.createDocumentFragment();

docFragment には作成された空の DocumentFragment オブジェクトへの参照が代入されます。

説明

DocumentFragment は DOM ノードの一種ですが、描画に利用される DOM ツリーには現れません。文書の一部分を生成し、DOM ツリーへ追加するためによく利用されます。DOM へと追加されると、すべての子要素によって置き換えられます。

メモリ上にのみ存在し、DOM ツリーの一部分ではないため、DocumentFragment に子要素を追加してもリフロー（要素の位置と大きさを決定するための計算）が行われません。そのため DocumentFragment を利用することによって、パフォーマンスの改善が見込まれます。

documentFragment は、Internet Explorer 6 を含むすべてのブラウザで利用可能です。利用しない理由はありません。

利用例

var ul = document.getElementsByTagName("ul")[0]; // ul 要素があることを仮定
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// よく知られた Web ブラウザのリスト

ブラウザ互換性

仕様

• DOM Level 2: createDocumentFragment
• DOM Level 3: createDocumentFragment

関連情報

• document.implementation.createDocument()
• documentFragment