dom_dom0400_003

先頭に要素を差し込むにはparent.( A )(child)を使う。特定のノードの直前に入れたい場合はparent.( B )(newNode, referenceNode)を使う。

解答

A: prepend
B: insertBefore

解説

prependは親の最初の子として追加。insertBeforeは参照ノードの直前に新ノードを置く低レベルAPI。

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

[ html ]

<ul id="todo"><li>既存1</li></ul>
<script>
  const ul = document.getElementById('todo');
  const first = document.createElement('li');
  first.textContent = '先頭追加';
  ul.prepend(first);

  const target = ul.lastElementChild;
  const before = document.createElement('li');
  before.textContent = '直前に挿入';
  ul.insertBefore(before, target);
</script>