JavaScript’s element.appendChild() method behaving weird

Question

What i am trying to do is.. appending a common node/element in 3 elements..

const elements = document.getElementsByClassName(“test”);
const newElement = document.createElement(“BUTTON”);
newElement.classList.add(“dummy”);

Array.from(elements).forEach(item => {
item.appendChild(newElement);
});

Expected behaviour is that all .test elements should contain .dummy button..

but actually only last .test element getting that .dummy button..

But if i place that button in loop like this :

const elements = document.getElementsByClassName(“test”);

Array.from(elements).forEach(item => {
const newElement = document.createElement(“BUTTON”);
newElement.classList.add(“dummy”);
item.appendChild(newElement);
});

then all .test elements get that .dummy button..!!

Can anyone explain any particular reason about this JS behaviour ? I have tried to google it but didn’t find any good explanation about this.

You're adding the *same* element multiple times. You cannot have a node with multiple parents in the DOM, so you're just moving it from one to the next. — VLAZ, Apr 29 '20 at 09:23
Did you check the documentation? "*If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position*" [from MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild). It even repeats the same thing in the very next paragraph: "*This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position*" — VLAZ, Apr 29 '20 at 09:25
Thanks a lot for the smooth explanation..!! Post it as answer — Ritesh, Apr 29 '20 at 09:27
Yes completely explained the concept.. it’ll help others as well..!! — Ritesh, Apr 29 '20 at 09:29
Also related: [How to add multiple divs with appendChild?](https://stackoverflow.com/questions/14910196/how-to-add-multiple-divs-with-appendchild) — VLAZ, Apr 29 '20 at 09:34

score 2 · Answer 1 · answered Apr 29 '20 at 09:14

That is because a child dom can only have one parent as dom is a tree structure and child node cannot inherit from multiple parents. In your case you are trying to assign multiple parent to the child nodenewElement.

Inside the array every time a new child is created and it has only single parent

score 1 · Accepted Answer · answered Apr 29 '20 at 09:33

Thanks @VLAZ Posting it as an answer :

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position" from MDN. It even repeats the same thing in the very next paragraph: "This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position

JavaScript’s element.appendChild() method behaving weird

2 Answers2