Document: createDocumentFragment() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

新しい空の DocumentFragment を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

構文

js
createDocumentFragment()

引数

なし。

新しく作成された空の DocumentFragment オブジェクトで、中にノードが挿入できるものです。

使用上の注意

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

文書フラグメントはメモリー内にあり、メインの DOM ツリーの一部ではないため、文書フラグメントを利用することによって、一部の古いエンジンでは性能の改善が見込まれます。

DocumentFragment コンストラクターを使用して新しいフラグメントを生成することもできます。

js
const fragment = new DocumentFragment();

この例では、主要なウェブブラウザーのリストを DocumentFragment 内に作成し、表示するドキュメントに新しい DOM サブツリーを追加しています。

HTML

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

JavaScript

js
const element = document.getElementById("ul"); // ul が存在することを仮定
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

結果

仕様書

Specification
DOM
# ref-for-dom-document-createdocumentfragment①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createDocumentFragment

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報