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 支持 支持 支持 支持