dom_dom0700_004

DocumentFragment を appendChild で挿入した直後のフラグメントの状態として正しいものはどれか。

  1. フラグメント自身がDOMに残り、子ノードは複製される
  2. フラグメントは空になり、子ノードは移動される
  3. フラグメントと子ノードの両方がDOMに残る
  4. フラグメントは削除され、子ノードも削除される
正解
  1. フラグメントは空になり、子ノードは移動される
解説

フラグメントは「子を運ぶ容器」。appendChild(fragment) すると子ノードは 移動 され、フラグメントは空になる（フラグメント自体はDOMに現れない）。

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

[ html ]

<ul id="log"></ul>
<script>
  const frag = document.createDocumentFragment();
  ['A','B','C'].forEach(t => {
    const li = document.createElement('li');
    li.textContent = t;
    frag.appendChild(li);
  });
  document.getElementById('log').appendChild(frag);
  console.log(frag.childNodes.length); // 0
</script>