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