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 Standard
# ref-for-dom-document-createdocumentfragment①

ブラウザーの互換性

BCD tables only load in the browser

関連情報