JavaScript的insertBefore方法用于在指定子节点前插入新的子节点。
在JavaScript中，insertBefore()方法是一个用于操作DOM（文档对象模型）的函数，它允许开发者将一个节点插入到一个参考节点之前，这个方法非常灵活，可以用于在页面上动态地添加或者重新排序元素。
基本语法
insertBefore()方法的基本语法如下：
referenceNode.parentNode.insertBefore(newNode, referenceNode);
newNode是要插入的新节点，而referenceNode是新节点应该插入到其前面的参考节点，如果referenceNode为null，则新节点将被添加到子节点的末尾。
参数说明
newNode: 必须提供，要插入的新节点。
referenceNode: 可选，指定新节点应该插入到其前面，如果省略此参数或设置为null，则新节点将被添加到子节点的末尾。
使用示例
假设我们有以下HTML结构：
<ul id=”list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
我们可以使用insertBefore()方法来在列表中添加一个新的列表项：
// 创建一个新的列表项节点
var newItem = document.createElement(‘li’);
newItem.textContent = ‘New Item’;
// 获取列表的引用
var list = document.getElementById(‘list’);
// 获取要在其前面插入新节点的参考节点（第二个列表项）
var secondItem = list.children[1];
// 使用insertBefore方法插入新节点
list.insertBefore(newItem, secondItem);
执行上述代码后，列表将变为：
<ul id=”list”>
<li>Item 1</li>
<li>New Item</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
注意事项
如果newNode已经是文档中的一个节点，那么它会从当前位置被移动到新位置。
如果newNode是null，那么不会发生任何事情。
如果referenceNode是null，那么新节点会被添加到子节点的末尾。
如果referenceNode是一个文本节点，那么newNode会被插入到该文本节点的前面。
如果referenceNode不存在于parentNode的子节点中，那么newNode会被添加到子节点的末尾。
相关问题与解答
Q1: insertBefore()方法会改变现有节点的顺序吗？
A1: 是的，如果newNode被插入到现有节点之前，那么现有节点及其后面的所有节点都会向后移动。
Q2: 如果新节点已经存在于DOM中，会发生什么？
A2: 如果新节点已经存在于DOM中，那么它会被移动到新的位置，而不是被复制。
Q3: 可以在没有父节点的情况下使用insertBefore()方法吗？
A3: 不可以，因为insertBefore()方法是定义在Node接口上的，所以必须有一个父节点存在。
Q4: 是否可以将一个元素插入到body元素的前面？
A4: 不可以直接这样做，因为body元素没有父节点，但是可以通过其他方式实现，例如先创建一个新的div作为body的兄弟节点，然后再将元素插入到这个新的div中。
