dom_dom0800_003

複数要素を追加するとき、( A )を繰り返すとReflowが頻発するため、( B )を使ってまとめて追加すると効率的である。

解答

A: appendChild
B: DocumentFragment

解説

DocumentFragmentを使うと、仮想的なコンテナに一括追加でき、最後にまとめてDOMに挿入するためReflowが1回で済む。

使用例(サンプルコード)

[ javascript ]

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment);