HTML DOMドキュメントcreateDocumentFragment（）
例
空のリストに要素を追加します。
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
既存のリストに要素を追加します。
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
定義と使用法
このcreateDocumentFragment()メソッドは、オフスクリーンノードを作成します。
オフスクリーンノードを使用して、任意のドキュメントに挿入できる新しいドキュメントフラグメントを作成できます。
このcreateDocumentFragment()メソッドを使用して、ドキュメントの一部を抽出したり、コンテンツの一部を変更、追加、または削除したり、ドキュメントに挿入したりすることもできます。
ノート
HTML要素はいつでも直接編集できます。ただし、より良い方法は、（オフスクリーンの）ドキュメントフラグメントを作成し、準備ができたらこのフラグメントを実際の（ライブ）DOMにアタッチすることです。準備ができたらフラグメントを挿入するため、リフローは1つ、レンダリングは1つだけになります。
HTML要素アイテムをループに追加する場合は、ドキュメントフラグメントを使用するとパフォーマンスも向上します。
警告！
ドキュメントフラグメントに追加されたドキュメントノードは、元のドキュメントから削除されます。
構文
document.createDocumentFragment()
パラメーター
| なし |
戻り値
| タイプ | 説明 |
| ノード | 作成されたDocumentFragmentノード。 |
ブラウザのサポート
document.createComment() DOMレベル1（1998）の機能です。
すべてのブラウザで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |