【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のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍