Node.insertBefore

概要

指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。

構文

var insertedElement = parentElement.insertBefore(newElement, referenceElement)

referenceElementnull の場合、newElement は子ノードのリストの末尾に挿入されます。

  • insertedElement 挿入されるノード、つまり newElement のこと
  • parentElement 新しく挿入されるノードの親ノード
  • newElement 挿入されるノード
  • referenceElement newElement が挿入される前にあるノード

<!DOCTYPE html>
<html lang="ja">

<head>
  <title>Gecko DOM insertBefore test</title>
</head>

<body>

<div>
  <span id="childSpan">foo bar</span>
</div>

<script>
// IDや属性、内容のない空の要素ノードを作成します。
var sp1 = document.createElement("span");

// 作成した要素に 'newSpan' というID属性を与えます。
sp1.setAttribute("id", "newSpan");

// 作成した要素のために適当な内容を作成します。
var sp1_content = document.createTextNode("This is a new span element. ");

// その内容を作成した要素に適用します。
sp1.appendChild(sp1_content);

var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

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

</body>
</html>

insertAfter メソッドはありませんが、insertBefore メソッドと nextSibling メソッドを組み合わせてる事で同じ動作をエミュレートする事ができます。

先の例でいえば、次のようにして sp1sp2 の後ろへ挿入可能です。

parentDiv.insertBefore(sp1, sp2.nextSibling);

もし sp2 に次に隣り合うノードがない、つまり最後尾の子ノードで、sp2.nextSiblingnull を返すならば、sp1 は子ノードのリストの最後尾(つまり、sp2 の直後)に挿入されるでしょう。

例 2

firstChild プロパティを使用し、最初の子要素の前に要素を追加します。

// 新しいノードの挿入先の親要素への参照を取得
var parentElement = document.getElementById('parentElement');

// 子要素への参照を取得
var theFirstChild = parentElement.firstChild;

// 新規の要素の作成
var newElement = document.createElement("div");

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

※要素が最初の子要素を持たない場合、firstChildnull となります。その場合でも、子要素は parentElement の唯一の子要素として追加されます。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 (有) (有) (有) (有)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

仕様

Document Tags and Contributors

Contributors to this page: Ryotakano, ethertank, Mgjbot
最終更新者: ethertank,