HTML DOM Document createDocumentFragment() メソッド

定義と使用法

createDocumentFragment() オフスクリーンノードを作成するメソッドです。

オフスクリーンノードは、どのドキュメントに挿入できる新しいドキュメントフラグメントを構築するために使用できます。

createDocumentFragment() このメソッドは、ドキュメントの一部の内容を抽出、変更、追加、削除し、ドキュメントに戻すこともできます。

ヒント

HTML要素を直接編集することは常にできますが、より良い方法は（オフスクリーン）ドキュメントフラグメントを構築し、準備ができたら実際の（アクティブ）DOMにこのフラグメントを追加することです。なぜなら、フラグメントが準備できたらフラグメントを挿入するので、一度のリフレッシュと一度のレンダリングだけで済みます。

ループ内でHTML要素項を追加する場合は、ドキュメントフラグメントを使用することでパフォーマンスを向上させることができます。

注意：ドキュメントノードがドキュメントフラグメントに追加されると、元のドキュメントから削除されます。

インスタンス

例1

空のリストに要素を追加します：

const fruits = ['Banana', 'Orange', 'Mango'];
// ドキュメントフラグメントを作成します：
const dFrag = document.createDocumentFragment();
// li要素をフラグメントに追加します：
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// フラグメントをリストに追加します：
document.getElementById('myList').appendChild(dFrag);

自分で試してみてください

例2

既存のリストに要素を追加します：

const fruits = ['Banana', 'Orange', 'Mango'];
// ドキュメントフラグメントを作成します：
const dFrag = document.createDocumentFragment();
// li要素をフラグメントに追加します：
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// フラグメントをリストに追加します：
document.getElementById('myList').appendChild(dFrag);

自分で試してみてください

構文

document.createDocumentFragment()

パラメータ

ありません。

返り値

タイプ 説明
ノード 新しく作成されたDocumentFragmentノードは、子ノードがありません。

ブラウザのサポート

document.createComment() DOMレベル1（1998）の機能です。

すべてのブラウザがサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート