How to move an element from one place to another in the DOM using plain JavaScript?

Question

I know how to do it in jQUery (untested but should work):

$('#foo').html().appendTo('#bar');
$('#foo').remove();

But how to do this in plain JS?

Answer 1

field = document.getElementById('e');
document.getElementById('x').innerHTML = field.parentNode.innerHTML;
field.parentNode.removeChild(field);

this is ONE solution, you can search for clonenode too.

Answer 2

Your jQuery code can be done like this in plain javascript:

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");
bar.innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);

But this just copies the html code inside foo to bar as a string, then removes foo from the DOM.

Moving the nodes is also possible, like this:

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");
bar.innerHTML = "";
for (var node in foo.childNodes) {
    bar.appendChild(node);
}
foo.parentNode.removeChild(foo);

This will move the actual child nodes of foo to bar, and then remove the now empty foo.