以前に紹介したappencChildとinsertBeforeは親要素を基準にしてその中の子要素を追加するメソッドでした。

今回のbeforeとafterは親要素ではなくて、指定した要素の前後に要素を取得するメソッドです。親子ではなくて、両隣にお好きな要素を追加することができます。

beforeは指定した要素の上に追加できます。

{指定した要素}.before({追加したい要素})

一方で、afterは指定した要素の下に追加できます。

{指定した要素}.after({追加したい要素})

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

See the Pen Untitled by Makoto Ohnami (@zohnami) on CodePen.

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

「もともとあるbox」を基準にして、上に追加、下に追加するボタンを二つ用意しました。

<button class="add_button_upper">上に追加</button>
<button class="add_button_lower">下に追加</button>

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

次はJavaScriptのコードです。前半でbeforeを使っています。

まず.add_button_upperクラスを取得してボタンをクリックした時のイベントを設定します。

設定するイベントはbeforeを使って要素を上に追加する処理ですね。

addEventListenerの中ではcreateElementを使って追加したい要素を生成して、今回のテーマであるbeforeで上に追加しています。

// 上に追加のボタンを取得
const addButtonUpper = document.querySelector('.add_button_upper');

// ボタンにクリックイベントを設定
addButtonUpper.addEventListener('click', () => {
  // 追加したい要素を作成
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  newBox.innerText = '上に追加したbox';

  // beforeで#box1の上に追加する
  const container = document.querySelector('#box1');
  container.before(newBox);
});

後半はafterです。取得する要素が異なるだけで、beforeのときとやり方は大きく変わらないですね。

// 下に追加のボタンを取得
const addButtonLower = document.querySelector('.add_button_lower');

// ボタンにクリックイベントを設定
addButtonLower.addEventListener('click', () => {
  // 追加したい要素を作成
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  newBox.innerText = '下に追加したbox';

  // beforeで#box1の下に追加する
  const container = document.querySelector('#box1');
  container.after(newBox);
});

一覧に載っているアイテムを複製するようなボタンがあるときなんかはよく使うことになると思います。

指定して要素を上、または下に複製、みたいな操作はいろんなWebサービスで見かけますね。

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • フロスはむずかしい