JavaScript 要素を追加できる insertAdjacentHTML 試してみた。

VDOM が主流になってるから直に DOM 操作することすくなってると思うけど、innerHTML みたいにStringをHTMLとして追加できる insertAdjacentHTML っての初めて知ったので試してみた。

insertAdjacentHTML

element.insertAdjacentHTML(position, text);
insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。
element.insertAdjacentHTML - Web API | MDN

テキストを HTML として position で指定した箇所に追加できる

<div>
  <ul id="list">
    <li>FOO</li>
  </ul>
</div>

const list = document.getElementById('list');
list.insertAdjacentHTML('afterbegin', '<li> afterbegin </li>');
list.insertAdjacentHTML('beforeend', '<li> beforeend </li>');
list.insertAdjacentHTML('beforebegin', '<b> beforebegin </b>');
list.insertAdjacentHTML('afterend', '<b> afterend </b>');

👇

<div>
  <b> beforebegin </b>
  <ul id="list">
    <li> afterbegin </li>
    <li>FOO</li>
    <li> beforeend</li>
  </ul>
  <b> afterend </b>
</div>

子要素の先頭に追加するのが before じゃなくて afterbegin だったり、子要素の末に追加するのが beforeend で before 付いていたりで基準がよくわからん… って印象

innerHTML との違い

elm.innerHTML += 'add content' とすれば innerHTML でも appendChild のように要素を追加することができるにはできます。
但し、 innerHTML で追加した場合、追加した要素内に付いていたイベントは削除されてしまうという問題がありました。

insertAdjacentHTML を使って elm.insertAdjacentHTML('beforeend', 'add content') とすれば文字列をHTMLとして追加でき、かつイベントが残ります。
つまり appendChild と同じ状態になります。

sample

See the Pen [WIP] innerHTML vs insertAdjacentHTML by KIKIKI (@kikiki_kiki) on CodePen.

感想

innerHTML はイベントごと削除できるという部分がメリットなので、elm.innerHTML = '' で要素内をクリーンにしたり、イベントごと消し去って初期化するのに使うのが良さそうです。
insertAdjacentHTML は Node オブジェクトを変換して追加することはできないようなので、<template> タグとかとは相性が悪そうでした。(template タグの中身を String で取得する方法があれば知りたいです…) なので、insertAdjacentHTML が Fragment とか Node オブジェクトで追加できるようになれば便利なんだけどな〜という印象で面白いけど、VDOM を使わずに String を DOM 要素にして追加したいみたいな要件なら <template> を使って appendChild とか insertBefore で頑張るかな〜という感覚でした。

[参考]