特定のHTML要素の前後、または内側に新しいHTML要素を追加する

起点にしたHTML要素の前後か内側に新しくHTML要素を追加する

JavaScriptでinsertAdjacentHTMLメソッドを使うと、特定のHTML要素を起点にして新しくHTML要素を追加（挿入）することができます。

insertAdjacentHTMLメソッドは特定のHTML要素に対して前、後、子孫要素の先頭、子孫要素の末尾のいずれかの場所に第2パラメータで指定したHTMLを追加することができます。
ただし、第2パラメータに指定できるのは文字列のみのため、追加したいHTML要素がElementオブジェクトの場合はouterHTMLを使って文字列に変換する等の対策が必要です。

コード例

// 1.起点にするHTML要素を取得
const btn = document.getElementById("btn");

// 2.追加するHTML要素を作成
let p_element = document.createElement('p');
p_element.textContent = 'OK';

// 3.指定した場所にHTML要素を追加
btn.insertAdjacentHTML( 'beforebegin', p_element.outerHTML);

insertAdjacentHTMLメソッドの第1パラメータで指定する「追加する場所」は以下の4種類のいずれかを文字列で指定します。

それぞれの値を指定した例を解説していきますが、今回は例として以下のindex.htmlにあるsection要素を起点にして新しくp要素を追加します。

index.html

<main>
	<article>
		<header>
			<h1>記事のタイトル</h1>
			<p>この記事はJavaScriptを確認するために書いています。</p>
		</header>
		<section id="section1">
			<h2>1章 親要素を探す</h2>
			<p>JavaScriptを使って指定した親要素を探し、取得することができます。</p>
		</section>
	</article>
</main>

HTML要素の直前に追加する

第1パラメータにbeforebeginを指定して、起点になるHTML要素の直前にp要素を追加します。

コード例

// 1.起点にするHTML要素を取得
const btn = document.getElementById("btn");

// 2.追加するHTML要素を作成
let p_element = document.createElement('p');
p_element.textContent = 'OK';

// 3.HTML要素を追加する場所を指定
btn.insertAdjacentHTML( 'beforebegin', p_element.outerHTML);

実行すると、以下の場所にp要素が追加されます。

index.html

<main>
	<article>
		<header>
			<h1>記事のタイトル</h1>
			<p>この記事はJavaScriptを確認するために書いています。</p>
		</header>
		<p>テキストを追加してみる</p>
		<section id="section1">
			<h2>1章 親要素を探す</h2>
			<p>JavaScriptを使って指定した親要素を探し、取得することができます。</p>
		</section>
	</article>
</main>

HTML要素の直後に追加する

第1パラメータにafterendを指定して、起点になるHTML要素の直後にp要素を追加します。

コード例

// 1.起点にするHTML要素を取得
const btn = document.getElementById("btn");

// 2.追加するHTML要素を作成
let p_element = document.createElement('p');
p_element.textContent = 'OK';

// 3.HTML要素を追加する場所を指定
btn.insertAdjacentHTML( 'afterend', p_element.outerHTML);

実行すると、以下の場所にp要素が追加されます。

index.html

<main>
	<article>
		<header>
			<h1>記事のタイトル</h1>
			<p>この記事はJavaScriptを確認するために書いています。</p>
		</header>
		<section id="section1">
			<h2>1章 親要素を探す</h2>
			<p>JavaScriptを使って指定した親要素を探し、取得することができます。</p>
		</section>
		<p>テキストを追加してみる</p>
	</article>
</main>

HTML要素の内側の先頭に追加する

第1パラメータにafterendを指定して、起点になるHTML要素の内側の先頭にp要素を追加します。

コード例

// 1.起点にするHTML要素を取得
const btn = document.getElementById("btn");

// 2.追加するHTML要素を作成
let p_element = document.createElement('p');
p_element.textContent = 'OK';

// 3.HTML要素を追加する場所を指定
btn.insertAdjacentHTML( 'afterbegin', p_element.outerHTML);

実行すると、以下の場所にp要素が追加されます。

index.html

<main>
	<article>
		<header>
			<h1>記事のタイトル</h1>
			<p>この記事はJavaScriptを確認するために書いています。</p>
		</header>
		<section id="section1">
			<p>テキストを追加してみる</p>
			<h2>1章 親要素を探す</h2>
			<p>JavaScriptを使って指定した親要素を探し、取得することができます。</p>
		</section>
	</article>
</main>

HTML要素の内側の末尾に追加する

第1パラメータにbeforeendを指定して、起点になるHTML要素の内側の末尾にp要素を追加します。

コード例

// 1.起点にするHTML要素を取得
const btn = document.getElementById("btn");

// 2.追加するHTML要素を作成
let p_element = document.createElement('p');
p_element.textContent = 'OK';

// 3.HTML要素を追加する場所を指定
btn.insertAdjacentHTML( 'beforeend', p_element.outerHTML);

実行すると、以下の場所にp要素が追加されます。

index.html

<main>
	<article>
		<header>
			<h1>記事のタイトル</h1>
			<p>この記事はJavaScriptを確認するために書いています。</p>
		</header>
		<section id="section1">
			<h2>1章 親要素を探す</h2>
			<p>JavaScriptを使って指定した親要素を探し、取得することができます。</p>
			<p>テキストを追加してみる</p>
		</section>
	</article>
</main>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。