insertAdjacentHTML を今更知った

innerHTML += とか jQuery.append() とかやらなくていいのか…。

insertAdjacentHTML は、指定した要素の innerHTML を壊すことなく、要素の前後に別の要素を挿入できるネイティブの API。恥ずかしながら最近まで知らなかったが、「Can I Use」を見るとだいぶ前から使えたみたい。

サンプルコード

まずは以下のような div#target がある前提。

<div id="target">
  <p>Text</p>
</div>

次に、以下のように JavaScript コードを書く。

document.querySelector('#target').insertAdjacentHTML('afterbegin', '<p>Child text</p>');

すると、結果は以下のような HTML になる。

<div id="target">
  <p>Child text</p>
  <p>Text</p>
</div>

この時、元からあった <p>Text</p> にイベントを定義していたりした時に、そのイベント定義が消えたりしないところがミソ。

挿入場所の指定

要素を挿入できる場所は4ヶ所ある。第1引数に文字列で指定する。

<!-- 'beforebegin' -->
<element>
  <!-- 'afterbegin' -->
  <child>Text</child>
  <!-- 'beforeend' -->
</element>
<!-- 'afterend' -->

ウ～ンコレはベンリ!!

参考