ywork2020.com

Title

指定した箇所にエレメントを挿入する

目次 (INDEX)

insertAdjacentElementとは

ここで説明するinsertAdjacentElement とは次の語句からなるjavascriptのメソッドです。
insert
読み: インサート
意味: 挿入
adjacent
読み: アジェイセントゥ
意味: 隣接、隣り合った
element
読み: エレメント
意味: 要素

目次に戻る

Element.insertAdjacentElementの概要

このメソッドは、指定要素に対して指定したポジションにエレメントを挿入します。

エレメントとは要素のことですが、これは既存の要素も、新しく作成した要素も、どちらでも構いません。 このメソッド引数に既存の要素を指定すると、要素はDOMツリー内の元の位置から指定された場所に移動します。 また、新しく作成した要素は、DOMツリー内の指定された場所に挿入されます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

Element.insertAdjacentElement(position, element);

目次に戻る

サンプルコードと実行結果

このメソッドは指定された箇所(position)に、 エレメント(element)を挿入します。 挿入されたエレメントは、DOMツリーの指定箇所に追加、または移動されます。

以下、構文です。

Element.insertAdjacentElement(position, element);

このメソッドで指定するpositionには4つのキーワードがあります。 その4つのキーワードでエレメントが挿入される位置が変わりますので一つずつサンプルで確認しておきます。

ポジション: beforebegin

beforebeginポジションは指定要素の直前にエレメントを挿入します。

サンプルコード: CSS 
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML 
<body>
	<output id="idAnswer">innerHTML</output>
</body>
  • 02: output要素 (insertAdjacentElementの実行結果を出力)
サンプルコード: script 
<script>
	let elmAnswer = document.getElementById("idAnswer");
	let elmNewSpan = document.createElement("span");
	elmNewSpan.innerText = "NewElement";
	elmNewSpan.style.color = "red";
	elmAnswer.insertAdjacentElement("beforebegin", elmNewSpan);
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmNewSpanという変数名で新しい要素を作成 (span)
  • 04: elmNewSpanの内部テキストを設定 (NewElement)
  • 05: elmNewSpanの文字色を設定 (red)
  • 06: elmAnswerにinsertAdjacentElementメソッドを使用 (指定要素の直前に挿入)
実行結果:
答え: id="idAnswer"
innerHTML

目次に戻る

ポジション: afterbegin

afterbeginポジションは指定要素内の最初の子要素の前にエレメントが挿入されます。

サンプルコード: CSS 
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML 
<body>
	<output id="idAnswer">innerHTML</output>
</body>
  • 02: output要素 (insertAdjacentElementの実行結果を出力)
サンプルコード: script 
<script>
	let elmAnswer = document.getElementById("idAnswer");
	let elmNewSpan = document.createElement("span");
	elmNewSpan.innerText = "NewElement";
	elmNewSpan.style.color = "red";
	elmAnswer.insertAdjacentElement("afterbegin", elmNewSpan);
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmNewSpanという変数名で新しい要素を作成 (span)
  • 04: elmNewSpanの内部テキストを設定 (NewElement)
  • 05: elmNewSpanの文字色を設定 (red)
  • 06: elmAnswerにinsertAdjacentElementメソッドを使用 (指定要素の中の最初の子要素の前に挿入)
実行結果:
答え: id="idAnswer"
innerHTML

目次に戻る

ポジション: beforeend

beforeendポジションは指定要素内の最後の子要素の後にエレメントが挿入されます。

サンプルコード: CSS 
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML 
<body>
	<output id="idAnswer">innerHTML</output>
</body>
  • 02: output要素 (insertAdjacentElementの実行結果を出力)
サンプルコード: script 
<script>
	let elmAnswer = document.getElementById("idAnswer");
	let elmNewSpan = document.createElement("span");
	elmNewSpan.innerText = "NewElement";
	elmNewSpan.style.color = "red";
	elmAnswer.insertAdjacentElement("beforeend", elmNewSpan);
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmNewSpanという変数名で新しい要素を作成 (span)
  • 04: elmNewSpanの内部テキストを設定 (NewElement)
  • 05: elmNewSpanの文字色を設定 (red)
  • 06: elmAnswerにinsertAdjacentElementメソッドを使用 (指定要素の中の最後の子要素の後に挿入)
実行結果:
答え: id="idAnswer"
innerHTML

目次に戻る

ポジション: afterend

afterendポジションは指定要素の直後にエレメントを挿入します。

サンプルコード: CSS 
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML 
<body>
	<output id="idAnswer">innerHTML</output>
</body>
  • 02: output要素 (insertAdjacentElementの実行結果を出力)
サンプルコード: script 
<script>
	let elmAnswer = document.getElementById("idAnswer");
	let elmNewSpan = document.createElement("span");
	elmNewSpan.innerText = "NewElement";
	elmNewSpan.style.color = "red";
	elmAnswer.insertAdjacentElement("afterend", elmNewSpan);
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmNewSpanという変数名で新しい要素を作成 (span)
  • 04: elmNewSpanの内部テキストを設定 (NewElement)
  • 05: elmNewSpanの文字色を設定 (red)
  • 06: elmAnswerにinsertAdjacentElementメソッドを使用 (指定要素の直後に挿入)
実行結果:
答え: id="idAnswer"
innerHTML

目次に戻る

insertAdjacentElementを使用する上での要点

Element.insertAdjacentElement(position, element);

insertAdjacentElementメソッドの1つめの引数であるpositionには4つのキーワードが指定できます。 このキーワードで指定要素のどの部分にelementを挿入するかが決定されます。

  1. beforebegin: 指定要素の直前
  2. afterbegin: 指定要素内の最初の子要素の前
  3. beforeend: 指定要素内の最後の子要素の後
  4. afterend: 指定要素の直後

上記を単純な例で表すと下記の通りです。 

beforebegin
<指定要素>
	afterbegin
	<子要素>
		innerHTML
	</子要素>
	beforeend
</指定要素>
afterend

目次に戻る