【JavaScript】insertAdjacentHTMLでHTML要素を追加する【挿入位置指定】

こんにちは、Ryohei（@ityryohei）です！

insertAdjacentHTMLでHTML要素を追加する方法のご紹介です。

JavaScriptで指定した要素にある要素を追加したい状況はよくあるかと思います。insertAdjacentHTMLのプロパティを使用することで、指定した位置にHTML要素を追加することができますので、概要から使い方まで簡単にご紹介していきたいと思います。

本記事の内容

insertAdjacentHTMLとは
insertAdjacentHTMLの使い方
insertAdjacentHTMLでHTML要素を追加する

では、解説していきます。

insertAdjacentHTMLとは

insertAdjacentHTMLは、引数に指定したHTMLやXMLを解析して、その結果をDOMツリーにノードとして挿入することができるプロパティです。似た動きをするプロパティにinnerHTMLがありますが、innerHTMLとは違い、HTML要素を追加する際に既存の要素を破壊することありません。また、HTML要素を挿入する位置は引数で容易に指定することができるため、狙った場所にHTML要素を追加することが可能となっています。

insertAdjacentHTMLの使い方

insertAdjacentHTMLは下記のように記述します。

element.insertAdjacentHTML(position, text);

「position」と「text」は引数になります。それぞれに指定する値は下記の通りです。

position

「position」には指定した要素に挿入する位置を指定します。引数には下記の値を指定することができます。

beforebegin	指定した要素の直前に挿入する
afterbegin	指定した要素内にある最初の子要素の前に挿入する
beforeend	指定した要素内にある最後の子要素の後に挿入する
afterend	指定した要素の直後に挿入する

text

「text」にはHTMLやXMLとして挿入することができる文字列を指定します。

下記はinsertAdjacentHTMLのpositionに各値を指定して実行した際の挿入場所を表したものです。コメントの位置に「text」に記述したHTML要素が挿入されます。

<!-- beforebegin -->
<div>
<!-- afterbegin -->
intotheprogram
<!-- beforeend -->
</div>
<!-- afterend -->

insertAdjacentHTMLでHTML要素を追加する

では、実際に各「position」にHTML要素を追加してみます。下記のHTML要素に対して、段落のタグを追加します。

<div id="box">
  <h1>Title</h1>
</div>

各「position」を指定した際の実行結果も記載しておりますので、insertAdjacentHTMLを使用する際に参考にしていただければ幸いです。

beforebegin

let element = document.getElementById('box');
element.insertAdjacentHTML('beforebegin', '<p>Paragraph</p>');

//実行結果
<p>Paragraph</p> //←ここに追加
<div id="box">
  <h1>Title</h1>
</div>

afterbegin

let element = document.getElementById('box');
element.insertAdjacentHTML('afterbegin', '<p>Paragraph</p>');

//実行結果
<div id="box">
  <p>Paragraph</p> //←ここに追加
  <h1>Title</h1>
</div>

beforeend

let element = document.getElementById('box');
element.insertAdjacentHTML('beforeend', '<p>Paragraph</p>');

//実行結果
<div id="box">
  <h1>Title</h1>
  <p>Paragraph</p> //←ここに追加
</div>

afterend

let element = document.getElementById('box');
element.insertAdjacentHTML('afterend', '<p>Paragraph</p>');

//実行結果
<div id="box">
  <h1>Title</h1>
</div>
<p>Paragraph</p> //←ここに追加

まとめ

最後にinsertAdjacentHTMLの「position」に指定することができる値をまとめます。

beforebegin	指定した要素の直前に挿入する
afterbegin	指定した要素内にある最初の子要素の前に挿入する
beforeend	指定した要素内にある最後の子要素の後に挿入する
afterend	指定した要素の直後に挿入する

JavaScriptでDOMを操作してノードを挿入するというのはよく使用する処理となります。insertAdjacentHTMLを使用することで、指定要素の狙った位置にHTML要素を追加することが可能となります。非常に便利なプロパティですので、ご活用いただければと思います。

以上、JavaScriptでHTML要素を追加するinsertAdjacentHTMLのご紹介でした！