空の 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 仕様書にて初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

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