Javascript 中的 insertBefore 方法

insertBefore 方法是 Javascript 中一个常用的 DOM 操作方法，用于在指定父元素下插入一个新的子元素。本文将介绍 insertBefore 方法的用法及示例。

语法

insertBefore 方法的语法如下：

parentNode.insertBefore(newNode, referenceNode)

其中：

• parentNode：要插入新节点的父节点。
• newNode：要插入到父节点中的新节点。
• referenceNode：在父节点中要插入子节点的参考节点。新的子节点将插入在该节点之前。

返回值

insertBefore 方法返回插入的新节点。

示例

// 创建新节点
var newElement = document.createElement('div');
newElement.innerText = '我是新节点。';

// 获取父节点和参考节点
var parentNode = document.getElementById('parent');
var referenceNode = document.getElementById('reference');

// 在父节点中插入新的节点
parentNode.insertBefore(newElement, referenceNode);

此示例中，我们使用 createElement 方法创建了一个新的 div 元素，并设置了其 innerText 属性。然后，我们获取了父节点和参考节点，将新节点插入到父节点中参考节点的前面。

注意，如果 referenceNode 参数为 null，则 insertBefore 方法将新节点插入到父节点的末尾，即与 appendChild 方法相同。

总结

insertBefore 方法是 Javascript 中一个常用的 DOM 操作方法，用于在指定父元素下插入一个新的子元素。大家在开发 Web 应用时会经常用到该方法。