【JavaScript】特定の要素の前に要素を挿入する｜parentNode.insertBefore

parentNode.insertBefore

JavaScriptで特定の要素の前に要素を挿入するには、次の手順で挿入できます。

• 挿入元の要素を特定します。
• 挿入先の要素を特定します。
• 挿入したい新しい要素を、挿入先の要素の直前に配置します。

具体的なコードを見ていきましょう。

具体的なコード

以下は、この手順を具体的なコードで示したものです：

// 挿入したい新しい要素を作成
var newElement = document.createElement("div");

// 挿入先の要素を特定
var targetElement = document.getElementById("target");

// 新しい要素を挿入先の要素の直前に配置
targetElement.parentNode.insertBefore(newElement, targetElement);

上記のコードでは、新しい要素としてdiv要素を作成し、挿入先の要素としてidが “target” となっている要素を特定しています。そして、parentNode.insertBefore() メソッドを使用して、新しい要素を挿入先の要素の直前に配置しています。

まとめ

実際の使用例では、getElementById() メソッド以外の方法を使って要素を特定することもできます。また、要素の種類や属性を指定することも可能です。