JavaScriptで特定の親要素内の特定要素の直前に要素を追加するのに便利な.insertBeforeメソッドの使い方

特定の親要素内の特定要素の直前に要素を追加する.insertBefore()メソッド

JavaScriptで特定の親要素内の特定要素の直前に要素を追加するには、insertBefore()メソッドを利用します。

insertBefore()メソッドは、親要素を指定して、その親要素内の指定された子要素の直前に要素を追加します。

そのため、親要素と、軸となる子要素の合計2つの要素の取得が必須です。

メソッド

メソッド意味返り値
【親要素】.inserBefore(子要素, 追加要素)親要素内の軸となる子要素の直前に要素を追加要素(Element)

サンプルコード

サンプルコードとして、親要素内の先頭に要素を1列追加するスクリプトを紹介します。

Output
【親要素の末尾に要素を追加】
親要素
子要素1
子要素2
子要素3
Pug
#targetArea 【特定要素の直前に要素を追加】
		#targetParent 親要素
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
JavaScript
const targetParent = document.querySelector('#targetParent');
const targetChild = document.querySelector('.targetChild');
//divタグを作成して挿入
const additionalElement = document.createElement("div");
additionalElement.textContent = '子要素0(追加された子要素)';
targetParent.insertBefore(additionalElement, targetChild);
インストラクター
コメント

コメントを残す