Digamos que eu tenha três <div>elementos em uma página. Como posso trocar as posições da primeira e da terceira <div>? jQuery está bem.

Trivial com jQuery

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

Se quiser fazer isso repetidamente, você precisará usar seletores diferentes, pois os divs manterão seus ids conforme são movidos.

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

Não há necessidade de usar uma biblioteca para uma tarefa tão 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

Isso leva em consideração o fato de que getElementsByTagNameretorna um NodeList ativo que é atualizado automaticamente para refletir a ordem dos elementos no DOM à medida que são manipulados.

Você também pode 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

e existem várias outras permutações possíveis, se você quiser experimentar:

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

por exemplo :-)

.antes e depois

Use o JS vanilla moderno! Muito melhor / mais limpo do que antes. Não há necessidade de consultar um pai.

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

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

Suporte do navegador - 94,23% global em julho de 20

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; 
};

e use-o assim:

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

se você não quiser usar o jQuery, pode facilmente adaptar a função.

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 função pode parecer estranha, mas depende muito de padrões para funcionar corretamente. Na verdade, pode parecer funcionar melhor do que a versão jQuery que tvanfosson postou, que parece fazer a troca apenas duas vezes.

Em que peculiaridades dos padrões ele se baseia?

insertBefore Insere o nó newChild antes do nó filho existente refChild. Se refChild for nulo, insira newChild no final da lista de filhos. Se newChild for um objeto DocumentFragment, todos os seus filhos serão inseridos, na mesma ordem, antes de refChild. Se o novo filho já estiver na árvore, ele será removido primeiro.

A abordagem Jquery mencionada na parte superior funcionará. Você também pode usar JQuery e CSS. Diga, por exemplo, em Div one você aplicou class1 e div2, você aplicou classe class2 (digamos, por exemplo, cada classe de css fornece uma posição específica no navegador), agora você pode trocar as classes, use jquery ou javascript (isso mudará a posição)

Desculpe por interromper este tópico, tropecei no problema "trocar elementos DOM" e brinquei um pouco

O resultado é uma "solução" nativa do jQuery que parece ser muito bonita (infelizmente, não sei o que está acontecendo nos componentes internos do jQuery ao fazer isso)

O código:

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

A documentação do jQuery diz que insertAfter() move o elemento e não o clona