概要
指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。
構文
varinsertedElement =parentElement.insertBefore(newElement,referenceElement)referenceElement が null の場合、newElement は子ノードのリストの末尾に挿入されます。
insertedElement挿入されるノード、つまりnewElementのことparentElement新しく挿入されるノードの親ノードnewElement挿入されるノードreferenceElementnewElementが挿入される前にあるノード
例
<!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 メソッドを組み合わせてる事で同じ動作をエミュレートする事ができます。
先の例でいえば、次のようにして sp1 を sp2 の後ろへ挿入可能です。
parentDiv.insertBefore(sp1, sp2.nextSibling);
もし sp2 に次に隣り合うノードがない、つまり最後尾の子ノードで、sp2.nextSibling が null を返すならば、sp1 は子ノードのリストの最後尾(つまり、sp2 の直後)に挿入されるでしょう。
例 2
firstChild プロパティを使用し、最初の子要素の前に要素を追加します。
// 新しいノードの挿入先の親要素への参照を取得
var parentElement = document.getElementById('parentElement');
// 子要素への参照を取得
var theFirstChild = parentElement.firstChild;
// 新規の要素の作成
var newElement = document.createElement("div");
// 最初の子要素の前に新規の要素を挿入
parentElement.insertBefore(newElement, theFirstChild);
※要素が最初の子要素を持たない場合、firstChild は null となります。その場合でも、子要素は parentElement の唯一の子要素として追加されます。
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | (有) | (有) | (有) | (有) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |