How to swap DOM child nodes in JavaScript?

Question

What is the easiest way to swap the order of child nodes?

For example I want childNode[3] to be childNode[4] and vice-versa.

Answer 1

There is no need for cloning. You can just move one node before the other. The .insertBefore() method will take it from its current location and insert it somewhere else (thus moving it):

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]); 

You get the parent of the node. You then call the insertBefore method on the parent and you pass it the childNode[4] node and tell it you want it inserted before childNode[3]. That will give you the result of swapping their order so 4 will be before 3 when it's done.

Reference documentation on insertBefore.

Any node that is inserted into the DOM that is already in the DOM is first removed automatically and then inserted back so there is no need to manually remove it first.

Answer 2

Use .before or .after!

This is vanilla JS!

childNode[3].before(childNode[4]); 

or

childNode[4].after(childNode[3]); 

For more durability swapping, try:

function swap(node1, node2) {     const afterNode2 = node2.nextElementSibling;     const parent = node2.parentNode;     node1.replaceWith(node2);     parent.insertBefore(node1, afterNode2); } 

This should work, even if the parents don't match

Can I Use - 95% Jul '21