Question

Consider the following HTML:

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

Why $("div").append($("p")); first removes the <p> from its original place?

Note: I don’t want to create a second copy of <p>. I just want to understand why jQuery removes the <p> before appending it.

Answer 1

jQuery is just an abstraction of the DOM, and that’s what the DOM appendChild method does.

Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.

In a way, it makes sense; a node has a parent, children, and some other things. If a node could be in multiple different places, it would have to have multiple parents and such. That would add a lot of unneeded complexity to the API.