MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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 ブラウザのリスト

ブラウザ互換性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (有) (有) (有) (有) (有)
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

仕様

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: chikoski
 最終更新者: chikoski,