insertAdjacentHTMLを使ってHTML要素の追加を行う

TOC

HTML要素を追加する際、つい何も考えずにinnerHTMLを使ってしまう自分への戒めとして、今回はinsertAdjacentHTMについてまとめていきたいと思います。

使い方

insertAdjacentを訳すと、insert（挿入）adjacent（隣接）とあるように、指定した要素に隣接する形で、HTML要素を追加することができるメソッドです。

element.insertAdjacentHTML(position, htmlText);

第一引数に指定する値は、要素に対して挿入する位置を指定します。

HTML上で表現すると以下のようになります。

<!-- beforebegin -->
<div id="target-element">
  <!-- afterbegin -->
  sample
  <!-- beforeend -->
</div>
<!-- afterend -->

例

<div id="target-element"></div>

const element = document.getElementById('target-element')
element.insertAdjacentHTML('beforebegin', '<div id="insert-element">insert</div>');
//  適用後
// <div id="insert-element"></div>
// <div id="target-element"></div>

innerHTMLとの違い

MDNのドキュメントにも記載がありますが、innerHTMLより動作は高速のようです。

innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。

また、innerHTMLは破壊的操作であることに対し、insertAdjacentHTMLは非破壊的にHTML要素の操作を行う事が出来ます。 （innerHTMLは、操作対象要素内にイベントリスナーを設定していた場合、正常に動作しなくなってしまいます）

対応ブラウザ

IE以外の主要ブラウザで使用可能です。 2022年6月16日にIEのサポート終了する事が発表されていますので、以降はサポート対象内の主要ブラウザに全て対応される事となります。