Nikita Chernykh Nikita Chernykh - 2 months ago 8
jQuery Question

appendChild doesn't work when I'm trying to move span

I have a div in one place and I want to move it to another 2 places. I have id's for two parent tags and my spanEN to move. When I appendChild it only works for parentHeader.appendChild(spanEN );

var parentNav = document.getElementById('js-liveChatParentNav');
var parentHeader = document.getElementById('js-liveChatParentHeader');

var spanEN = document.getElementById("js-chat-sourceEN").childNodes[1];

parentNav.appendChild(spanEN );
parentHeader.appendChild(spanEN );


in console I see this: one appendChild works and the other one dosen't.

enter image description here

Answer

When you use appendChild to append an element that's already in the DOM, it's moved, not cloned. If you want to clone it, you can, via cloneNode:

parentNav.appendChild(spanEN);
parentHeader.appendChild(spanEN.cloneNode(true));
// ----------------------------^^^^^^^^^^^^^^^^

The true means "clone this node and its descendants."