JavaScript insertBefore报错：目标节点非当前节点子节点求助

你遇到的报错核心是完全搞反了insertBefore的调用对象和参数逻辑。

insertBefore的正确用法 #

insertBefore是父节点调用的方法，语法规则是：

父节点.insertBefore(要插入的新节点, 参考节点);

其中要求：

• 参考节点必须是当前调用方法的父节点的直接子节点，否则就会触发你看到的「参考节点不属于当前节点」报错。

你的代码错误点 #

看你写的代码：

newElement.insertBefore(document.body, aChildOfDocumentBody);

这里你让newElement作为父节点，试图把document.body插到aChildOfDocumentBody前面，但aChildOfDocumentBody是document.body的子节点，根本不是newElement的子节点，完全不符合方法的要求，所以浏览器报错。

正确代码示例 #

如果你是想把newElement插入到document.body中，放在aChildOfDocumentBody的前面，正确写法应该是：

document.body.insertBefore(newElement, aChildOfDocumentBody);

如果你是想把某个节点插入到newElement内部，那参考节点必须是newElement的直接子节点，比如：

// 假设targetChild是newElement的子节点（比如通过getElementById获取的newElement的子元素）
newElement.insertBefore(yourNewNode, targetChild);

另外你尝试的newElement.insertBefore(document.body, document.body.children[0])同样错误，因为document.body.children[0]是document.body的子节点，不是newElement的子节点，不符合方法对参考节点的要求。

内容的提问来源于stack exchange，提问作者somerandomguy1