JavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する方法について現役エンジニアが解説しています。insertAdjacentHTMLメソッドとはHTMLのElementに対してHTML要素を差し込むことができるメソッドです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

insertAdjacentHTMLメソッドとは

HTMLの要素などを現すElementのメソッドで、呼び出し元のElementに対してHTMLを差し込むことができます。画面に新しいHTML要素を追加する場合によく使うメソッドになります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

insertAdjacentHTMLメソッドの使い方

HTMLを差し込む基準になるElementに対して、.insertAdjacentHTML()と記述することで使えます。第1引数に差し込む位置の指定をする文字列、第2引数に差し込むHTMLを渡します。

第1引数の差し込み位置の指定は、下記の4種類あります。HTMLを差し込みたい位置を指定するように、いずれかの文字列を第1に引数に指定してください。

1、beforebegin
Elementのタグの上に挿入します。

2、afterbegin
Elementタグの中の最初に挿入します。

3、beforeend
Elementタグの中の最後に挿入します。

4、afterend
Elementのタグの下に挿入します。

HTML要素を追加する方法

insertAdjacentHTMLメソッドを使って、第2引数にHTMLソースを記述します。具体的には下記に紹介しているソースコードをご覧ください。

insertAdjacentHTMLメソッドとinnerHTMLプロパティの違い

ざっくりと言うと、insertAdjacentHTMLメソッドは、HTMLを追加する場合に使いinnerHTMLはまるごと差し替える場合に使うという認識で差し支えないかと思います。

例えば特定のElementの中を、てっとり早くまるごと消すような場合はinnerHTMLに空文字を代入することで実現できます。最初に挿入したり最後に挿入したりする場合は、位置が指定できるinsertAdjacentHTMLが便利です。

実際に書いてみよう

JavaScriptでHTMLのElement取得からおこなっても良いのですが、今回はgetElementByIdのような取得の記述も無く使えるbodyタグの中にタイトルのh1タグを挿入してみます。

document.body.insertAdjacentHTML('afterbegin', '<h1>このタイトルが挿入されます</h1>');

この1行だけで、h1タグのタイトルが挿入されることが確認できるかと思います。

JavaScriptに標準で入っているdocumentオブジェクトはプロパティにbodyを持っています。そのため、document.bodyと記述することでそのままbodyタグに対して処理を行なえます。

今回は、insertAdjacentHTMLメソッドの第1引数にafterbeginを指定して、bodyタグの中の最初の位置に、第2引数で指定したh1タグのソースを挿入しています。

まとめ

insertAdjacentHTMLは、画面の表示をJavaScriptで操作する際に使うことの多いメソッドになります。

第1引数で挿入位置を指定する文字列は、リファレンスで確認しながら使えばよいので覚える必要は有りませんので気軽に使ってみてください。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。