为什么jQuery的“追加（）”的孩子首先删除它？

Question

考虑以下HTML：

<div>
    <p>Hello</p>
    World
</div>

为什么$("div").append($("p"));首先从原始位置移除<p>？

注意：我不想创建<p>的第二个副本。我只是想了解为什么jQuery在追加它之前会删除<p>。

Answer 1

jQuery只是DOM的抽象，that's what the DOM appendChild method does。

  

将节点newChild添加到此节点的子节点列表的末尾。 如果newChild已在树中，则会先将其删除。

在某种程度上，它是有道理的;节点有父，子和其他一些东西。如果节点可能位于多个不同的位置，则必须具有多个父节点等。这会给API增加许多不必要的复杂性。

Answer 2

DOM节点一次只能在一个地方。因此，如果你调用append来放置一个已经插入到DOM中的现有DOM节点，那么在将它放到某个新位置之前，必须将它从它所在的位置移除。

唯一的另一种选择是返回错误并拒绝附加文档中已有的节点。但是，设计师决定，如果你正在调用append（），你必须要它在那里，所以如果它当前在其他地方，那么先从那里删除它然后把它放在你指定的附加位置。

请注意，jQuery的append()会在具有此documentation note on MDN的DOM方法appendChild()之后自行建模：

  

如果child是对文档中现有节点的引用，   appendChild将其从当前位置移动到新位置   （即，不要求从其父节点中删除节点   在将其附加到其他节点之前）。

     

这也意味着节点不能位于文档的两个点上   同时。因此，如果节点已经有父节点，那么它是第一个   删除，然后附加在新位置。

Answer 3

因为您正在选择所有段落标记并告诉它们附加到div。你没有创建任何新的段落标签。

Answer 4

您正在选择已在DOM中的p-tag，然后将其附加到DOM中的其他位置。你期望发生什么？真正唯一的选择是1）你看到的，2）在附加之前复制选定的标签，或3）抛出错误，因为它已经在DOM中。