HTML DOM 元素 insertBefore()

示例

创建一个 <li> 元素
创建文本节点
将文本附加到 <li> 元素
在 <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]);

亲自试一试 »

将最后一个元素从一个列表移动到另一个列表的开头：

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

亲自试一试 »

将最后一个元素从一个列表移动到另一个列表的末尾：

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

亲自试一试 »

描述

这个insertBefore()方法在现有子节点之前插入一个子节点。

也可以看看：

语法

element.insertBefore( new, existing)

node.insertBefore( new, existing)

参数

Parameter	Description
new	Required. The node (element) to insert.
existing	Required. The node (element) to insert before. If `null`, it will be inserted at the end.

返回值

类型	描述
节点	插入的节点。

浏览器支持

element.insertBefore()是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11