Why isn't possible to append a same child in two dom element?

Question

I just notice I couldn\'t do

var d1 = document.createElement(\'div\');
var d2 = document.createElement(\'div\');
var p = document.createElement(\'p\');

d1.a         


        

Answer 1

jQuery's appendTo() method inserts "every element in the set of matched elements to the end of the target". Try this:

p.appendTo(".div-class1, .div-class2")

Answer 2

The DOM is a tree structure.

When you append an element, you change its parent.

A node, in the browser, is much more than just the text inside your P (that string could be shared, in fact). It also has a position, dimensions, a visibility, receives events that could have been fired in child elements, propagate events to its parent, and so on. Everything here depends on the position in the tree. Just like would many CSS selectors. It doesn't make a lot of sense to imagine it's the same element at two places, it's better to think about it as two nodes, with maybe some identical content.

If you want to have the same content at two places, you have to clone it.