To move an element from one parent to another, you can use the apppendChild() method of the DOM. The appendChild() method adds an element to the end of the list of the children of a given parent element.
If the given element is already a child of some existing element, the appendChild() method first removes that element from the existing parent and then appends it as a last child of the new parent element.
It means we don’t have to explicitly remove the given element from the existing parent when we want to move it to the new parent if we are using appendChild().
Let’s try to understand it with the help of an example.
Let’s say we have two parent div elements. Each div has a sub-heading(<h2>) and a paragraph(<p>) as its child elements. We want to move the paragraph of the second div into the first div element on the button click.
Here is our markup:
<div id="parent1">
<h2>This is Parent 1</h2>
<p>This is a child element</p>
</div>
<div>
<h2>This is Parent 2</h2>
<p id="target">This child will be moved</p>
</div>
<!--Button to move the element-->
<button id="mover">Move Element</button>
To listen to the click event on the button, we can attach a click event listener to the button using the addEventListener() method. This method will call a callback function every time you click on the button.
Inside the callback function, we can use the appendChild() method to move the element from one parent to another.
let parent1 = document.getElementById('parent1');
let mover = document.getElementById('mover');
let target = document.getElementById('target');
// Fires on button click
mover.addEventListener('click', function(){
// Move target to parent1 element
parent1.appendChild(target);
});
Here is the outcome of the above code:
As you can see from the above output, as soon as we click the button, the paragraph of the second div element moves to the first div element.
But what if we want to move all the children of the second div to the first? Let’s see it in the next section.
Move All Children from One Parent to Another
If we have more than one child element inside a parent element and we want to move them all to another parent, we can run a for loop over all the child nodes and append them one by one to the new parent using the appendChild() method.
To access the child nodes of an element, we can use the childNodes property. The childNodes property returns an array that contains all the child nodes of the given element.
We need to simply remove these child nodes one by one from the first parent and append them to the second one.
Let’s take the following markup which has two divs:
<h2>Move All Children From One Parent to Another</h2>
<div id="parent1">
<p>First child of first div</p>
<p>Second child of first div</p>
</div>
<div id="parent2">
<p>First child of second div</p>
<p>Second child of second div</p>
</div>
<!--Button to move all children -->
<button id="mover">Move All Children</button>
Now, add the following JS code to move all the children of the second div to the first:
let parent1 = document.getElementById('parent1');
let parent2 = document.getElementById('parent2');
let childNodes = parent2.childNodes;
let mover = document.getElementById('mover');
// Fires on button click
mover.addEventListener('click', function(){
// Append each node one by one to parent1
while(childNodes.length > 0){
parent1.appendChild(childNodes[0]);
}
});
Below is the outcome of the above program:
As you can see from the above output, all children of the second div are instantly moved to the first div element as soon as you click the button.
Conclusion
In this article, we learned how we can move an element from one parent to another using JavaScript.
To move an element from one parent to another, you can use the appendChild() method. This method simply appends the given element to the end of the list of the children of a parent.
If you want to move all children to another parent, you can run a for loop over the child nodes of the given element and append them to the target parent.
Thanks for reading.
