爲什麼jQuery的「append（）」首先將其刪除？

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

因爲您正在選擇所有段落標籤並告訴它們附加到div。你沒有創建任何新的段落標籤。

Answer 3

一個DOM節點一次只能在一個地方。因此，如果您調用append將已經插入到DOM中的現有DOM節點放置到新的位置，那麼它必須從它所在的位置移除。

唯一的另一種選擇是返回一個錯誤並拒絕附加已經在文檔中的節點。但是，設計者決定，如果你調用append（），你必須要它在那裏，所以如果它現在在別的地方，那麼先從那裏刪除它，然後把它放在你指定的地方附加。

注意，jQuery的append()車型本身的DOM方法appendChild()之後有這個documentation note on MDN：

如果孩子對文檔中的現有節點的引用， 使用appendChild移動它從當前位置到新位置 （即，不需要在將節點附加到其他節點之前將節點從其父節點 中移除）。

這也意味着一個節點不能同時在文檔 的兩個點上。所以如果節點已經有一個父節點，那麼首先刪除 ，然後附加到新的位置。

Answer 4

您正在選擇已經在DOM中的p標籤，然後將它附加到DOM中的其他位置。你期望會發生什麼？真正唯一的選擇是1）你看到的，2）在追加它之前複製所選標籤，或者3）因爲它已經在DOM中而引發錯誤。