JavaScript moving element in the DOM

Question

Let's say I have three <div> elements on a page. How can I swap positions of the first and third <div>? jQuery is fine.

Answer 1

There's no need to use a library for such a trivial task:

var divs = document.getElementsByTagName("div");   // order: first, second, third divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first 

This takes account of the fact that getElementsByTagName returns a live NodeList that is automatically updated to reflect the order of the elements in the DOM as they are manipulated.

You could also use:

var divs = document.getElementsByTagName("div");   // order: first, second, third divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first 

and there are various other possible permutations, if you feel like experimenting:

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0])); 

for example :-)

Answer 2

Trivial with jQuery

$('#div1').insertAfter('#div3'); $('#div3').insertBefore('#div2'); 

If you want to do it repeatedly, you'll need to use different selectors since the divs will retain their ids as they are moved around.

$(function() {     setInterval( function() {         $('div:first').insertAfter($('div').eq(2));         $('div').eq(1).insertBefore('div:first');     }, 3000 ); });