dom_dom0400_009

大量のノードを一括でDOMに挿入してReflowを減らすにはdocument.( A )()でフラグメントを作り、子をまとめて挿入後、parent.( B )(frag)で追加する。

解答

A: createDocumentFragment
B: appendChild

解説

DocumentFragmentは軽量の仮想コンテナ。フラグメントに要素を詰めてから親へappendChildすると効率的に描画できる。

使用例（サンプルコード）

[ html ]

<ul id="list"></ul>
<script>
  const frag = document.createDocumentFragment();
  for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `item ${i}`;
    frag.appendChild(li);
  }
  document.getElementById('list').appendChild(frag);
</script>