JavaScript オブジェクト

JavaScript 参考マニュアル

JS DOM 参考マニュアル

JavaScript History オブジェクト HTML DOM Element オブジェクト

HTML DOM insertBefore() メソッド

HTML DOM Element オブジェクト

insertBefore()このメソッドは、指定された既存のサブノードの前にサブノードを挿入するために使用されます。

もし指定されたサブオブジェクトがドキュメント内の既存のノードの参照である場合、insertBefore()はその現在の位置から新しい位置に移動させます（以下の「もっと詳しい例」を参照してください）。

使用appendchild()メソッドは指定された親ノードの子ノードリストの末尾にノードを追加します。

语法：

node.insertBefore(newNode, existingNode)

例

var newElem = document.createElement("h"3");　　//　新しいhを作成します3要素
var newContent = document.createTextNode("Hi there");　　//　テキストコンテンツを作成します
newElem.appendChild(newContent);　　//　テキストノードを新しいhに追加します3
var body = document.body;　　//　BODYを取得します
body.insertBefore(newElem, body.childNodes[0]);　//　BODYの最初の子要素の前にHを挿入します3

テストを見て‹/›

注意：テキストを持つ新しい要素を作成する場合は、テキストをTextノードとして作成し、それを要素に追加して、その後ドキュメントに要素を追加することを忘れないでください。

ブラウザの互換性

すべてのブラウザでinsertBefore()メソッドが完全にサポートされています：

メソッド
insertBefore()	は	は	は	は	は

パラメータの値

パラメータ	説明
newNode	挿入するノードオブジェクト
existingNode	新しいノードをその前に挿入する子ノードが必要です。nullに設定すると、insertBeforeメソッドはnewnodeを末尾に挿入します

技術的詳細

返り値：	挿入されたノードを表すNodeオブジェクト
DOMバージョン：	DOMレベル1

さらに多くの例

新しい<p>要素を作成して<div>要素に挿入します：

例

var para = document.createElement("p");　　　//　新しい<p>ノードを作成します
var txt = document.createTextNode("これは段落です.");//　テキストノードを作成します
para.appendChild(txt);//　テキストを<p>に追加します
var div = document.getElementById("demo");//　「id=demo」を持つDIVを取得します
div.insertBefore(para, div.childNodes[0]);//　DIVの最初の子要素の前にPノードを挿入します

テストを見て‹/›

この例では、要素を現在の場所から新しい位置に移動します：

例

var elem = document.getElementById("myList2").lastElementChild;
var list1　= document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

テストを見て‹/›

JavaScript オブジェクト

JavaScript 参考マニュアル

JS DOM 参考マニュアル

HTML DOM insertBefore() メソッド

语法：

ブラウザの互換性

パラメータの値

技術的詳細

さらに多くの例

関連参考