dom_dom0700_003

大量挿入のときは ( A ) を使って一時的にノードをため、最後にまとめて親へ追加する。( A ) 自体は ( B ) には現れない。

解答

A: DocumentFragment
B: DOM（ドキュメント）ツリー

解説

DocumentFragment は軽量コンテナで、直接レンダリングや DOM ツリーには現れません。まとめて差し込むことで描画や reflow の回数を抑えられます。

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

[ 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>