第2引数のノードの前に、第1引数のノードを挿入します。

文法

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

parentElementは、新しく挿入されるノードの親となります。

引数	説明
newElement	挿入するノードを指定します。
referenceElement	ここに指定したノードの前にnewElementが挿入されます。 もし、これがnullの場合、 newElementは、子ノードのリストの最後に挿入されます。
戻り値
insertedElement	戻り値は挿入されたノードになります。 つまり、これはnewElementということになります。

例

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
// <span>要素を新しく作成
var sp1 = document.createElement("span");

// 要素を挿入する前に、要素の参照を取得します。
var sp2 = document.getElementById("childElement");
// 親要素の参照を取得します。
var parentDiv = sp2.parentNode;

// sp2の前に新しい要素を挿入します。
parentDiv.insertBefore(sp1, sp2);
</script>

insertAfterメソッドは存在しませんが、 insertBeforeメソッドとnextSiblingを組み合わせて、実装することが可能です。

下記の例は、sp2の後ろにsp1を挿入することを実現しています。

parentDiv.insertBefore(sp1, sp2.nextSibling);

もし、sp2がnext siblingを持たない場合、それは最後の子ノードであるため、 sp2.nextSiblingはnullを返します。 そのため、sp1は子ノードリストの最後に追加され、実質的にsp2の後ろに挿入されたことになります。

Internet Explorerでは、referenceElementがundefinedの場合、エラーをスローする一方、 その他のモダンブラウザでは正常に動作します。

例2

firstChildプロパティを使用して、 1つ目の子要素の前に要素を挿入します。

// 新しいノードを挿入したい要素の参照を取得します。
var parentElement = document.getElementById('parentElement');
// 上記要素ないの最初の子の参照を取得
var theFirstChild = parentElement.firstChild;

// 新しい要素を生成
var newElement = document.createElement("div");

// 最初の子の前に、新しい要素を挿入
parentElement.insertBefore(newElement, theFirstChild);

要素が1つ目の子を持たない場合、firstChildはnullになります。 そのため、最後の子の後に要素が挿入されます。 ただし、1つ目の子を持たないということは、最後の子も持たないということになるので、 挿入後は新しい要素が唯一の要素となります。

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	◯	◯	◯	◯

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	?	?	?	?

仕様

• insertBefore

 Back to top