此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Node：insertBefore() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Node 接口的insertBefore() 方法是将一个节点插入到指定父节点的子节点中，并位于参考节点之前。
如果给定的节点已经存在于文档中，insertBefore() 会将其从当前位置移动到新位置。（也就是说，它会在附加到指定的新父节点之前自动从现有的父节点中移除。）
这意味着一个节点不能同时存在于文档的两个位置。
备注：可以使用Node.cloneNode() 在将节点追加到新的父节点之前先对其进行复制。请注意，使用cloneNode() 进行复制的节点不会自动保持同步。
如果给定的子节点是DocumentFragment，则该DocumentFragment 的全部内容将被移动到指定父节点的子节点列表中。
语法
insertBefore(newNode, referenceNode)参数
newNode要插入的节点。
referenceNode在其之前插入
newNode的节点。如果为null，newNode将被插入到节点的子节点列表末尾。
返回值
返回添加的子节点（除非newNode 是DocumentFragment——将返回空的DocumentFragment）。
异常
预插入有效性
示例
示例 1
<div> <span>foo bar</span></div><script> // 创建要插入的新节点 const newNode = document.createElement("span"); // 获取父节点的引用 const parentDiv = document.getElementById("childElement").parentNode; // 开始测试用例 [ 1 ]：存在 childElement（全部正常运行） let sp2 = document.getElementById("childElement"); parentDiv.insertBefore(newNode, sp2); // 结束测试用例 [ 1 ] // 开始测试案例 [ 2 ]：childElement 类型未定义 sp2 = undefined; // id 为“childElement”的节点不存在 parentDiv.insertBefore(newNode, sp2); // 隐式动态转换为节点类型 // 结束测试用例 [ 2 ] // 开始测试案例 [ 3 ]：childElement 的类型为“undefined”（字符串） sp2 = "undefined"; // id 为“childElement”的节点不存在 parentDiv.insertBefore(newNode, sp2); // 生成“Type Error: Invalid Argument” // 结束测试用例 [ 3 ]</script>示例 2
<div> <span>foo bar</span></div><script> // 创建新的普通 <span> 元素 let sp1 = document.createElement("span"); // 获取引用元素 let sp2 = document.getElementById("childElement"); // 获取父元素 let parentDiv = sp2.parentNode; // 在 sp2 之前插入新元素 parentDiv.insertBefore(sp1, sp2);</script>备注：没有insertAfter() 方法。可以通过将insertBefore 方法与Node.nextSibling 结合使用来模拟实现。在前面的例子中，可以使用以下方法在sp2 后面插入sp1：
parentDiv.insertBefore(sp1, sp2.nextSibling);如果sp2 没有下一个兄弟节点，那么它必须是最后一个子节点——sp2.nextSibling 返回null，此时sp1 将被插入到子节点列表的末尾（紧接在sp2 之后）。
示例 3
使用firstChild 属性，在第一个子元素之前插入一个元素。
// 获取父元素let parentElement = document.getElementById("parentElement");// 获取父元素的第一个子元素let theFirstChild = parentElement.firstChild;// 创建新元素let newElement = document.createElement("div");// 在第一个子元素之前插入新元素parentElement.insertBefore(newElement, theFirstChild);如果元素没有第一个子元素，则firstChild 为null。该元素仍然会被追加到父元素的最后一个子元素之后。
由于父元素没有第一个子元素，所以也没有最后一个子元素。因此，新插入的元素是唯一的元素。
规范
| Specification |
|---|
| DOM # dom-node-insertbefore |