insertAdjacentElement() 和 insertBefore() 之间的区别？

Question

我试图理解DOMException: Node.insertBefore: Child to insert before is not a child of this node随着时间的推移在 React 和 Angular 项目中看到的错误，我开始想：如果元素 A 是元素 B 的“子元素”，为什么它甚至很重要？为什么选择Node.insertBefore()超过Element.insertAdjacentElement()？

在我看来，两者都长期以来一直支持浏览器，并且都适用于 SVG。但Node.insertBefore()对我来说似乎有一个尴尬的 API，因为它需要指定父级。

我错过了什么吗？

Answer 1

insertBefore()要求您提供父节点、现有子节点以及要插入的新节点；新节点被放置在子节点之前。子节点必须是父节点的直接子节点，否则会出现该错误。

insertAdjacentElement只需要您提供现有节点和新节点。新节点被插入到与现有节点相关的某个位置。无需提供父节点。

insertAdjacentElement()比 更新insertBefore()，但两者都已经存在了一段时间。