insertAdjacentHTMLを使うと、ただの文字列として用意したHTMLコードをHTMLのタグとして直接追加することが可能になります。

最初の引数には要素の追加位置を指定します。二番目の引数には追加したいHTMLのテキストデータですね。

adjacentという単語は「隣接」という意味のようです。あまり見たことない・・

{親要素}.insertAdjacentHTML({追加したい位置}, {追加したいHTMLのテキスト})

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

See the Pen insertAdjacentHTMLでタグを直接追加する by Makoto Ohnami (@zohnami) on CodePen.

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

初期の状態ではcontainerの中にはboxがひとつだけある状態です。ここにボタンを押したら、タグが追加されるようにJavaScriptを書いていきます。

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

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

以下がjsのコードです。

第一引数には以下の4種類が設定可能です。文字列なので、打ち間違い注意ですね。

頻繁に使うようならconstとかで定数として管理してもいいかもしれません。

  • beforeend 親要素内の末尾に追加
  • afterbegin 親要素内の先頭に追加
  • beforebegin 親要素の直前に追加
  • afterend 親要素の直前に追加

サンプルではnewItemという定数に追加したいHTMLを文字列として設定しています。

分別がつきやすくするように、countの変数も展開するようにしました。

あとはcontainerクラスのinsertAdjacentHTMLを実行して親要素の中にnewItemを追加しています。

const addButton = document.querySelector('.add_button');

let count = 1;
addButton.addEventListener('click', () => {
  // 追加したいHTMLの文字列。文字列なんで、自由に組み立てやすいのが魅力。
  const newItem = `<div class="box">追加したbox ${count}</div>`;
  
  const container = document.querySelector('.container');
  container.insertAdjacentHTML('beforeend', newItem);
  count += 1;
});

文字列で設定できるのは自由度が高いので、便利である反面、タグの書き間違いなどで思わぬ不具合を含んでしまうリスクもあるので、使いすぎは要注意かなと思います。

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • 鯖をよく食べた