JavaScript 节点操作中insertBefore怎么在指定位置插入节点-js教程-PHP中文网

insertbefore 方法通过在父节点中定位目标子节点，将新节点插入到该目标节点之前。具体做法是调用父节点的 insertbefore(newnode, referencenode)，传入要插入的新节点和作为参照的现有子节点；如果参照节点为 null，则新节点会被追加到末尾。

JavaScript 节点操作中insertBefore怎么在指定位置插入节点

如何指定在列表中间位置插入节点

要在列表中间插入节点，需要获取目标位置的子节点引用。通过遍历子节点或使用索引找到对应的 DOM 元素，然后将其作为第二个参数传入 insertBefore。例如，想在第三个元素前插入新节点，就获取第三个元素的引用并执行插入操作。

JavaScript 节点操作中insertBefore怎么在指定位置插入节点

const parent = document.getElementById('list');
const thirdChild = parent.children[2]; // 获取第三个子节点
const newNode = document.createElement('div');
newNode.textContent = 'Inserted';
parent.insertBefore(newNode, thirdChild); // 在第三个元素前插入

运行上述代码后，newNode 将成为父节点的第二个子节点（索引变为1），原第三个节点及其后的节点索引依次后移。返回值是新插入的节点对象。

Java Development Man

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。

下载

当参照节点不存在时行为如何

如果传入的参照节点为 null，insertBefore 的行为等同于 appendChild，即新节点会被添加到父节点子节点列表的末尾。这是处理动态位置插入时的安全回退机制。

JavaScript 节点操作中insertBefore怎么在指定位置插入节点

const parent = document.getElementById('list');
const newNode = document.createElement('span');
parent.insertBefore(newNode, null); // 等价于 appendChild

此时新节点位于所有现有子节点之后。若参照节点不在当前父节点的直接子节点列表中，浏览器会抛出 NotFoundError。因此在使用前需确保参照节点确实是父节点的直接子代。