[JavaScript]insertAdjacentHTMLで任意の場所に要素を追加する
insertAdjacentHTMLを使って任意の場所にHTML要素を追加します。
地味(?)に便利なものなので備忘録を兼ねて紹介。
insertAdjacentHTMLとは？
element.insertAdjacentHTML(position, text)
基本形はこの形です。
第一引数(position)でどこに挿入するのかを決め、第二引数(text)で何を挿入するのかを決めます。
ちなみに、単語を翻訳すると、
insert=差し込む、挿入する
adjacent=隣接、近接
という意味です。そのままですね。
コードを書いてみる
詳しい紹介は後述するとして、とりあえず簡単なコードを書いてみます。
hogeクラスの前にHTMLを挿入してみます。
querySelectorでDOMを取得(どこに挿入するのか？)
↓
insertAdjacentHTMLで挿入
このような流れです。
HTMLファイルとJavaScirptファイルを書くとこんな感じ。
<div class='hoge'>Hello World</div>
var target = document.querySelector('.hoge');
target.insertAdjacentHTML('beforebegin', '<p>INSERT!</p>');
insertAdjacentHTMLの第一引数でどこに挿入するか場所を決めると前述しましたが、beforebiginと記述したようにどこに挿入するかは指定されています。
4つの挿入場所
第一引数には4つの引数を割り当てることができます。
beforebegin：指定した要素の直前に挿入
afterend：指定した要素の直後に挿入
afterbegin：指定した要素内部の最初の子要素の前に挿入
beforeend：指定した要素内部の最後の子要素の後に挿入
