nomu こんにちは！
のむ（@nomu_engineer）です！
今回の記事では、insertAdjacentHTMLメソッドの使い方、HTML要素の追加の仕方についてまとめました！
この記事を読むメリット
・insertAdjacentHTMLメソッドについての理解を深めることができる。
・引数の指定しの仕方を知ることができる。
この記事を読むおすすめの読者
・プログラミング初心者
・駆け出しエンジニア
・insertAdjacentHTMLメソッドについて理解を深めたい方
それでは早速本題の方に入っていきたいと思います！
insertAdjacentHTMLメソッドとは
insertAdjacentHTMLメソッドとは、指定した位置にHTMLの要素等を追加することができるメソッドのことで、Elementが持つメソッドの一つです。
Elementとはざっくり言うと、オブジェクトのことで、HTML要素を内包したオブジェクトになります。
HTMLの要素のことなので、タグ名などがこれに当たります。
Elmentオブジェクトや、オブジェクトについての話をすると長くなるので、詳細はまた別の記事にまとめたいと思います。
つまるところinsertAdjacentHTMLメソッドはHTMLを指定した位置に追加できるメソッドだと言うことを押さえるておきましょう！
insertAdjacentHTMLメソッドの使い方
insertAdjacentHTMLメソッドの使い方についての解説からです。
insertAdjacentHTMLメソッドはHTMLを差し込む基準となるElementに対して、「.」ドットを用いて連結して記述します。
そして、（）内に引数を指定するのですが、第一引数に差し込みたい場所、第二引数に差し込みたいHTMLを記述します。
insertAdjacentHTMLメソッドを使う前に、JavaScriptでHTMLのElement取得しておきましょう。
Elementを取得しなくてもinsertAdjacentHTMLメソッドを使えるElementはあります。（body等）
ですが、どちらかと言うとElementの取得とセットで使うやりか方を多く見るので、今回はElementの取得とセットで記述します。
それでは実際にコードを書いたので記述の仕方を見ていきましょう！
const mainContainer = document.getElementById("main_container");
mainContainer.insertAdjacentHTML("afterend", "<h2>ここに記述した文字が表示されます<h2>")上記のように記述することで、Elementの取得と、insertAdjacentHTMLメソッドを用いて、指定した場所に指定したHTMLを挿入することができます。
第一引数に指定できる文字列の種類
HTML要素の挿入箇所を指定できる文字列は4種類あります。
それぞれを使い分けることで、取得したElementのどの位置にHTMLを差し込むのかを指定することができるのです。
①beforebegin（Elementタグの上に挿入）
②afterbegin（Elementタグの中の最初に挿入）
③beforeend（Elementタグの中の最後に挿入）
④afterend（Elementタグの下に挿入）
第一引数に関しては、最初から丸々暗記する必要はないです。
挿入したい位置に合わせて、上記の4パターンを使い分けましょう！
「使う場面に出くわしたら、調べて使う」これを繰り返していくうちに自然に身につきます。
最後に
最後に復習して終わりましょう！
①insertAdjacentHTMLメソッドとは
・指定した箇所に新しいHTML要素を追加できるメソッド
・Elementの取得と同時に行うことが多い
②挿入箇所をしてできる文字列は4種類
・beforebegin（Elementタグの上に挿入）
・afterbegin（Elementタグの中の最初に挿入）
・beforeend（Elementタグの中の最後に挿入）
・afterend（Elementタグの下に挿入）
記述の仕方はシンプルなので、難しく考えることなくバンバン使っていきましょう！
以上がinsertAdjacentHTMLメソッドの解説になります！
ありがとうございました！