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

【问题标题】：Difference between insertAdjacentElement() and insertBefore()?insertAdjacentElement() 和 insertBefore() 之间的区别？
【发布时间】：2022-01-10 16:24:11
【问题描述】：

我试图理解错误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，因为它需要指定父级。

我错过了什么吗？

【问题讨论】：

node.insertBefore 用于节点，element.insertAdjacentElement 用于元素。

标签： javascript dom

【解决方案1】：

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

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

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

【讨论】：