I just notice I couldn't do

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

d1.appendChild(p); // d1 has p now
d2.appendChild(p); // d2 has p now
// but where is p in d1 ?

Some would say it's logic, but well, when I first noticed that I thought how uncool it was.

Why isn't that possible ?

I just notice I couldn't do

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

d1.appendChild(p); // d1 has p now
d2.appendChild(p); // d2 has p now
// but where is p in d1 ?

Some would say it's logic, but well, when I first noticed that I thought how uncool it was.

Why isn't that possible ?

• javascript

• 2 Can you have one person in two cars at the same time ? What's not natural here ? – Denys Séguret Commented Jun 5, 2015 at 12:55
• You can clone it and put it under the second parent. – user663031 Commented Jun 5, 2015 at 12:56
• @DenysSéguret but a dom is not a car. I mean I am aware that p has one reference, moving that reference from one place to another one has some effect but my question is why doesn't the language create duplicate references for multiple bindings ? – vdegenne Commented Jun 5, 2015 at 12:57
• @HoschNok False and false. 1) If you append a node with jQuery you also move it. 2) there's a native cloneNode method. – Denys Séguret Commented Jun 5, 2015 at 13:00

3 Answers 3

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.

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")

for AppendChild same element multiple times , we can use this way :

//main function
function appendChildMultiple(parent) {
  //check function argument is an element
  if (parent.nodeType !== undefined) {
    const pTag = document.createElement("p");
    pTag.innerText = "This is the appended element";
    //finally append child to parent
    parent.appendChild(pTag);
  }
}

and :

// target the wrapper and create test elements
const wrapper = document.querySelector(".wrapper");
const d1 = document.createElement("div");
const d2 = document.createElement("div");
//append test elements to wrapper
wrapper.appendChild(d1);
wrapper.appendChild(d2);

//use appendChildMultiple function
appendChildMultiple(d1);
appendChildMultiple(d2);
//we appended "pTag" multiple times

if we use Functions , we can AppendChild same element multiple times whitout cloneNode

https://codepen.io/kiumad/pen/eYMNKYa