JavaScriptで、「文字列をElementにHTMLとして追加できて、 innerHTML じゃなくて、第1引数で追加位置を指定できるメソッド、名前なんだっけ?」と毎回なるのでメモ。
insertAdjacentHTML
モダンブラウザすべてで利用可能。IE4から対応とあるが、もともとはIEの独自実装だった模様。
第1引数の position で、挿入位置を変えられる。文字列なこと、すべて小文字なことに注意。
beforebegin: 要素の前afterbegin: 要素の子要素の先頭beforeend: 要素の子要素の末尾afterend: 要素の後
文字列は before|after と begin|end の組み合わせからなるが、追加位置との対応がわかりにくい。英語力がないからか
insertAdjacentElement
HTML文字列ではなく、Elementを第2引数として指定する、 insertAdjacentElement もある。
こちらも、モダンブラウザすべてで利用可能。
マイナーなのか、2020/11/28現在で日本語訳されていない。それぞれ、Elementの親インターフェースである、Nodeの insertBefore や appendChild が使われることが多いからかな?
第1引数の position は、 insertAdjacentHTML と同様。子要素への追加は Node.appendChild でいいが、他のパターンは Node.insertBefore を使って頑張るよりもシンプルになると思う。
// 従来の記述方法の例 const targetElement = ...; const insertElement = ...; // targetElement.insertAdjacentElement('beforebegin', insertElement); 相当 targetElement.parentNode.insertBefore(insertElement, targetElement); // targetElement.insertAdjacentElement('afterbegin', insertElement); 相当 targetElement.insertBefore(insertElement, targetElement.firstChild); // targetElement.insertAdjacentElement('beforeend', insertElement); 相当 targetElement.appendChild(insertElement); // targetElement.insertAdjacentElement('afterend', insertElement); 相当 targetElement.parentNode.insertBefore(insertElement, targetElement.nextSibling);
備考
insertAdjacentHTML のMDNには、
余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。
とあるが、以下のページによると、2015年末時点で、それほど大きな差はないみたい。
innerHTML への代入を使える時は、素直にそちらを使っておいたほうが楽だと思う。
