insertBeforeを使うと、指定した要素の直前にお好みの要素を追加することができます。

appendChildのときは、複数ある子要素の末尾に追加するパターンでしたが、今回はその逆で直前に追加することになります。

また、どの子要素の直前に追加するのかを指定することができ、より柔軟な使い方できるのも特徴ですね。

そのため、引数も二つ指定します。

{親要素}.insertBefore({追加したい要素}, {子要素(これから直前に追加される)})

サンプルコードは以下です。

See the Pen insertBeforeで子要素を追加する by Makoto Ohnami (@zohnami) on CodePen.

まずはHTMLを見てみましょう。

初期の状態ではcontainerの中にはboxがひとつだけある状態です。appendChildのときと変わらないですね。

<button class="add_button">追加</button>

<div class="container">
  <div class="box">
    もともとあるbox
  </div>
</div>

jsを使って「追加」ボタンを押したときに要素が追加されるようにしていきます。

insertBeforeは最後に実行しています。

まず最初は追加ボタン(add_button)を取得して、ボタンにクリックイベントを仕込んでいます。

addEventListenerの中身が要素の追加処理になります。

その追加処理の中身はまず前半でcreateElementを使って追加用のタグを生成しています。

後半では追加対象のcontainerを取得し、containerのinsertBeforeを実行して要素を追加しています。

ひとつポイントがあります。

insertBeforeの第二引数に指定しているのは以前に紹介したfirstElementChildです。

こうすることで、追加時に常にcontainer内の一番上の要素をつかむことになります。めっちゃ都合がいいですね。

countという変数を用意して、1ずつカウントアップしたものをnewBox.innerTextの文字列に仕込みました。

この文字列を見ることで、常にfirstElementChildを拾ってinsertBeforeしていることが確認できます。

// ボタンを取得
const addButton = document.querySelector('.add_button');

let count = 1;
// ボタンのクリックイベントに追加処理を仕込む
addButton.addEventListener('click', () => {
  // 追加用のタブを作成し、boxクラスを適用する。boxの文字列も設定
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  newBox.innerText = `追加したbox${count}`;

  // containerを取得して、appendChildを実行して上記のnewBoxを追加
  const container = document.querySelector('.container');
  container.insertBefore(newBox, container.firstElementChild);
  count += 1;
});

appendChildよりも柔軟に追加位置を指定できるのが便利ですが、ちゃんとデバッグしないとバグを産んでしまいそうですね。

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • 髪を切ります