Why is the element removed from the DOM?

Question

When using .appendNode() it seems to remove the original from the page - eg the clickedEl next sibling inner node.

Why is this? Is this the expected behaviour?

var textNode = clickedEl.nextElementSibling.childNodes[0];
var htmlObject = document.createElement('div');
if(video_text) htmlObject.appendChild(textNode);

Tested in FF 65.0.1

Answer 1

You are taking the textNode and appending it to htmlObject . This moves that node from its original location to the new location.

If you want to append a copy of the original node you can first clone it:

var textNode = clickedEl.nextElementSibling.childNodes[0].cloneNode();
var htmlObject = document.createElement('div');
if(video_text) htmlObject.appendChild(textNode);

Note that this will not copy event listeners to the cloned node.