https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-before-after-methods-that-are-convenient-for-adding-elements-before-and-after-a-specific-element-in-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-before-after-methods-that-are-convenient-for-adding-elements-before-and-after-a-specific-element-in-javascript/

JavaScriptで特定要素の前後に要素を追加するのに便利なbefore()・after()メソッドの使い方

特定要素の前後に要素を追加するbefore()・after()メソッド

JavaScriptで特定要素の前後に要素を追加するにはbefore()after()メソッドメソッドを利用します。

insertBefore()メソッドは、親要素を指定して、その親要素内の指定された子要素の直前に要素を追加するのに対して、before()は親要素の指定が必要ないので、より自由度が高いと言えます。

メソッド

メソッド意味返り値
【特定要素】.before(追加要素)特定要素の前に追加要素を追加する要素(Element)
【特定要素】.after(追加要素)特定要素の後に追加要素を追加する要素(Element)
特定要素の前後に要素を追加するメソッド

サンプルコード

サンプルコードとして、特定要素の前後に要素を1列ずつ追加するスクリプトを紹介します。

Output
【特定要素前後に要素を追加】
親要素
子要素1
子要素2
子要素3
Pug
#targetArea 【特定要素前後に要素を追加】
		#targetParent 親要素
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
JavaScript
const targetChild = document.querySelector('.targetChild');

//divタグを作成して挿入(before)
const additionalElement = document.createElement("div");
additionalElement.textContent = '子要素0(before()により追加された要素)';
targetChild.before(additionalElement);

//divタグを作成して挿入(after)
const additionalElement2 = document.createElement("div");
additionalElement2.textContent = '子要素1.5(after()により追加された要素)';
targetChild.after(additionalElement2);
インストラクター
コメント

コメントを残す