How to move all HTML element children to another parent using JavaScript?

Identifying your parent nodes

Before we get into moving nodes, we need to get a handle on the parent nodes we're dealing with:

let oldParent = document.getElementById('old-parent'); // Your Spartan of a parent
let newParent = document.getElementById('new-parent'); // Cue the new parent. Enter stage right.


Alternate scenario: your elements don't have IDs but classes or other properties:

let oldParent = document.querySelector('.old-parent'); // I was never cool, but now I'm "old" too?
let newParent = document.querySelector('.new-parent'); // New and shiny, like my Tesla.


Text nodes are nodes too!

During the node shifting process, we might encounter text nodes, not just elements.

<div id="source">Hello World<span>!</span></div>

In this case, our while loop will be inclusive and move the "Hello World" along with other child elements.

Position matters!

While shifting nodes from one parent to another, preserving the order is necessary to maintain the integrity of your DOM. “Just as you like things exactly where you place them on your desk!” 😄

while (source.firstChild) {
    target.appendChild(source.firstChild); // Call me a babysitter, I ensure everyone's carried over :|
}


The cautions!

innerHTML might look tempting, but watch out! It can lead to ID duplications, lost event listeners, and other surprises, like having pop quizzes in school! 🙃

Ready to ES6 and beyond

With ES6 (or beyond), you can give a cleaner look to the whole process.

let children = [...oldParent.childNodes]; // Take all, leave none.
children.forEach(child => newParent.appendChild(child)); // "You get an append, and you get an append, everyone gets an append!"


Don't forget the ol' browsers

While the new methods look great, remember the old chap (Internet Explorer). Stick with appendChild() and you can look forward to universal nods of compatibility understanding.

In the end, verify

Do a quick sanity check after your move. Your oldParent should be empty (like your coffee cup at the end of a coding spree) and newParent should be full of vibrant child nodes.

Step-by-step solution

1. Cloning nodes

Consider creating a deep clone of the content, if your project requires to have the nodes reused.

let clone = oldParent.cloneNode(true); // Mirror, mirror on the wall ...


2. Binding events

If you are dealing with event listeners, prefer addEventListener and avoid inline on-event handlers to keep your events intact while moving elements.

sourceChildren.addEventListener('click', eventHandler);
targetChildren.addEventListener('click', eventHandler);


3. Clean-up process

Like properly doing your dishes after a meal, you might need to do some clean-up operations on the old parent after moving the child nodes.

4. Validating output

The resulting structure needs a careful check, also watch out for unintentionally nested old-parent inside the new-parent.

if (newParent.contains(oldParent)) {
    console.error('Oops! Accidental nesting!');
}


5. The practical demonstration

For a hands-on understanding, here is an example to illustrate this process: http://jsfiddle.net/62f9L/