Digamos que tengo tres <div>elementos en una página. ¿Cómo puedo intercambiar posiciones del primero y del tercero <div>? jQuery está bien.

Trivial con jQuery

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

Si desea hacerlo repetidamente, deberá usar diferentes selectores, ya que los divs conservarán sus identificadores a medida que se muevan.

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

No es necesario utilizar una biblioteca para una tarea tan trivial:

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

Esto tiene en cuenta el hecho de que getElementsByTagNamedevuelve una NodeList en vivo que se actualiza automáticamente para reflejar el orden de los elementos en el DOM a medida que se manipulan.

También puedes usar:

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

y hay varias otras permutaciones posibles, si tiene ganas de experimentar:

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

por ejemplo :-)

.antes y después de

¡Utilice JS vanilla moderno! Mucho mejor / más limpio que antes. No es necesario hacer referencia a un padre.

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

Compatibilidad con navegadores : 94,23% global a julio de 2020

jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

y utilícelo así:

$('#div1').swap('#div2');

si no desea utilizar jQuery, podría adaptar fácilmente la función.

var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

Esta función puede parecer extraña, pero depende en gran medida de los estándares para funcionar correctamente. De hecho, puede parecer que funciona mejor que la versión de jQuery que publicó tvanfosson, que parece hacer el intercambio solo dos veces.

¿En qué peculiaridades de los estándares se basa?

insertBefore Inserta el nodo newChild antes del nodo secundario existente refChild. Si refChild es nulo, inserte newChild al final de la lista de hijos. Si newChild es un objeto DocumentFragment, todos sus elementos secundarios se insertan, en el mismo orden, antes de refChild. Si newChild ya está en el árbol, primero se quita.

El enfoque de Jquery mencionado en la parte superior funcionará. También puede usar JQuery y CSS. Diga, por ejemplo, que en Div one ha aplicado class1 y div2 ha aplicado clase class2 (por ejemplo, cada clase de CSS proporciona una posición específica en el navegador), ahora puede intercambiar las clases, use jquery o javascript (que cambiará la posición)

Perdón por tropezar con este hilo. Tropecé con el problema de "intercambiar elementos DOM" y jugué un poco.

El resultado es una "solución" nativa de jQuery que parece ser realmente bonita (desafortunadamente no sé qué está sucediendo en las partes internas de jQuery al hacer esto)

El código:

$('#element1').insertAfter($('#element2'));

La documentación de jQuery dice que insertAfter() mueve el elemento y no lo clona