HTML DOM Element insertBefore() メソッド

定義と使用方法

insertBefore() 既存の子ノードの前に子ノードを挿入するメソッドです。

もっと詳しくは：

appendChild() メソッド

replaceChild() メソッド

removeChild() メソッド

remove() メソッド

childNodes 属性

firstChild 属性

lastChild 属性

firstElementChild 属性

lastElementChild 属性

インスタンス

例 1

  1. 《<li>》要素を作成します
  2. テキストノードを作成します
  3. テキストを《<li>》要素に追加します
  4. 《<ul>》の最初の子要素の前に《<li>》要素を挿入します：
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

実際に試してみる

例 2

リストの最後の要素を別のリストの先頭に移動する：

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

実際に試してみる

例 3

リストの最後の要素を別のリストの末尾に移動する：

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

実際に試してみる

文法

element.insertBefore(newnode, existingnode)

または

node.insertBefore(newnode, existingnode)

パラメータ

パラメータ 説明
newnode 必須。挿入するノード（要素）。
existingnode

オプション。新しいノードの前に挿入する子ノード。

指定されていない場合、insertBefore メソッドは newnode を末尾に挿入します。

返り値

タイプ 説明
ノード 挿入されたノード。

ブラウザのサポート

element.insertBefore() DOM Level 1 (1998) 特性です。

すべてのブラウザが完全にサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート