HTML DOM 元素 insertBefore()
示例
- 创建 <li> 元素
- 创建文本节点
- 将文本追加到 <li> 元素
- 在 <ul> 中第一个子节点之前插入 <li> 元素
const newNode = document.createElement("li");
const textNode = document.createTextNode("水");
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)
参数
| 参数 | 描述 |
| new | 必需的。 要插入的节点（元素）。 |
| existing | 必需的。 要在其之前插入的节点（元素）。 如果为 null，则将在末尾插入。 |
返回值
| 类型 | 描述 |
| 节点 | 插入的节点。 |
浏览器支持
element.insertBefore() 是 DOM Level 1 (1998) 功能。
在所有浏览器中完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
