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

構文

var fragment = document.createDocumentFragment();

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

解説

DocumentFragment は DOM ノードです。メインの DOM ツリーの一部にはなりません。通常の使い方は、文書フラグメントを生成し、その文書フラグメントに要素を追加して、その文書フラグメントを DOM ツリーへ追加します。 DOM ツリー内では、文書フラグメントはすべての子要素によって置き換えられます。

文書フラグメントはメモリ内にあり、メインの DOM ツリーの一部ではないため、文書フラグメントに子要素を追加してもページのリフロー (要素の位置と大きさを決定するための計算) が行われません。そのため文書フラグメントを利用することによって、パフォーマンスの改善が見込まれます。

この例は主要なウェブブラウザーのリストを作成します。

HTML

<ul id="ul">
</ul>

JavaScript

var element  = document.getElementById('ul'); // ul があることを仮定
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

結果

仕様書

仕様書 状態 備考
DOM
Document.createDocumentFragment() の定義
現行の標準 DOM 1 仕様書にて初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり ?

関連情報

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

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