Node：insertBefore() 方法
insertBefore() 方法是 Node 接口的一部分，用于将一个节点插入到指定父节点的参考节点之前，作为其子节点。
如果给定的节点已存在于文档中，insertBefore() 会将其从当前位置移动到新位置。（即，在将其添加到指定的父节点之前，它将自动从其现有父节点中移除。）
这意味着一个节点不能同时存在于文档的两个位置。
注意： Node.cloneNode() 可用于在将节点添加到新父节点之前创建其副本。请注意，使用 cloneNode() 创建的副本不会自动保持同步。
如果给定的子节点是 DocumentFragment，则 DocumentFragment 的所有内容都会被移动到指定父节点的子节点列表中。
语法
insertBefore(newNode, referenceNode)
参数
newNode-
要插入的节点。
referenceNode-
newNode插入到其之前的节点。如果此值为null，则newNode将插入到节点的子节点列表的末尾。
返回值
返回添加的子节点（除非 newNode 是 DocumentFragment，在这种情况下，将返回空的 DocumentFragment）。
异常
插入前的有效性检查
示例
示例 1
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
// Create the new node to insert
const newNode = document.createElement("span");
// Get a reference to the parent node
const parentDiv = document.getElementById("childElement").parentNode;
// Begin test case [ 1 ] : Existing childElement (all works correctly)
let sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// End test case [ 1 ]
// Begin test case [ 2 ] : childElement is of Type undefined
sp2 = undefined; // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
// End test case [ 2 ]
// Begin test case [ 3 ] : childElement is of Type "undefined" (string)
sp2 = "undefined"; // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Generates "Type Error: Invalid Argument"
// End test case [ 3 ]
示例 2
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
// Create a new, plain <span> element
const sp1 = document.createElement("span");
// Get the reference element
const sp2 = document.getElementById("childElement");
// Get the parent element
const parentDiv = sp2.parentNode;
// Insert the new element into before sp2
parentDiv.insertBefore(sp1, sp2);
注意： 没有 insertAfter() 方法。可以通过结合使用 insertBefore 方法和 Node.nextSibling 来模拟。
在前面的示例中，可以使用以下方法将 sp1 插入到 sp2 之后：
parentDiv.insertBefore(sp1, sp2.nextSibling);
如果 sp2 没有下一个兄弟节点，则它必须是最后一个子节点 — sp2.nextSibling 返回 null，sp1 会被插入到子节点列表的末尾（紧跟在 sp2 之后）。
示例 3
使用 firstChild 属性，将元素插入到第一个子元素之前。
// Get the parent element
const parentElement = document.getElementById("parentElement");
// Get the parent's first child
const theFirstChild = parentElement.firstChild;
// Create a new element
const newElement = document.createElement("div");
// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild);
当元素没有第一个子节点时，firstChild 为 null。元素仍将被添加到父节点，位于最后一个子节点之后。
由于父元素没有第一个子节点，因此也没有最后一个子节点。因此，新插入的元素是唯一的元素。
规范
| 规范 |
|---|
| DOM # dom-node-insertbefore |
浏览器兼容性
加载中…