如何正确使用insertBefore

insertBefore 是 JavaScript 中的一个方法，用于将一个节点插入到指定节点之前。以下是如何正确使用 insertBefore 的步骤：

1. 选择参考节点和要插入的节点：

   • referenceNode：指定插入位置，即新节点将被插入到这个节点之前。如果设置为 null，则新节点将被插入到文档的末尾。
   • newNode：需要被插入的节点。

2. 调用 insertBefore 方法：

   • 在 JavaScript 代码中，你可以通过 referenceNode.insertBefore(newNode, referenceNode.nextSibling); 来调用 insertBefore 方法。这行代码的意思是将 newNode 插入到 referenceNode 之前，紧邻 referenceNode 的下一个节点（如果存在）。

3. 注意事项：

   • 确保 referenceNode 和 newNode 都是有效的 DOM 元素。
   • 如果 newNode 已经存在于文档中，那么它会被从当前位置移动到新的位置。
   • 如果 referenceNode 的父节点在插入操作之前被移除，那么 referenceNode 也会被移除。因此，在插入之前，请确保 referenceNode 的父节点仍然存在。

4. 示例代码：

   // 获取要插入新节点的参考节点和父节点
   const referenceNode = document.getElementById('someElementId');
   const parentElement = referenceNode.parentNode;
   
   // 创建要插入的新节点
   const newNode = document.createElement('div');
   newNode.textContent = '我是新插入的节点';
   
   // 将新节点插入到参考节点之前
   parentElement.insertBefore(newNode, referenceNode);
   

通过遵循以上步骤，你可以正确地在 DOM 中使用 insertBefore 方法来插入新节点。