Disons que j'ai trois <div>éléments sur une page. Comment puis-je échanger les positions du premier et du troisième <div>? jQuery est très bien.

Trivial avec jQuery

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

Si vous voulez le faire à plusieurs reprises, vous devrez utiliser différents sélecteurs car les divs conserveront leurs identifiants lorsqu'ils sont déplacés.

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

Il n'est pas nécessaire d'utiliser une bibliothèque pour une tâche aussi triviale:

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

Cela tient compte du fait que getElementsByTagNamerenvoie une liste de nœuds en direct qui est automatiquement mise à jour pour refléter l'ordre des éléments dans le DOM au fur et à mesure de leur manipulation.

Vous pouvez également utiliser:

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

et il existe diverses autres permutations possibles, si vous avez envie d'expérimenter:

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

par exemple :-)

.avant et après

Utilisez la vanille JS moderne! Bien mieux / plus propre qu'auparavant. Pas besoin de référencer un parent.

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

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

Prise en charge des navigateurs - 94,23% dans le monde à partir de juillet 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; 
};

et utilisez-le comme ceci:

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

si vous ne souhaitez pas utiliser jQuery, vous pouvez facilement adapter la fonction.

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

Cette fonction peut paraître étrange, mais elle s'appuie fortement sur des standards pour fonctionner correctement. En fait, cela peut sembler mieux fonctionner que la version jQuery que tvanfosson a publiée et qui semble ne faire l'échange que deux fois.

Sur quelles particularités des normes s'appuie-t-il?

insertBefore Insère le nœud newChild avant le nœud enfant refChild existant. Si refChild est nul, insérez newChild à la fin de la liste des enfants. Si newChild est un objet DocumentFragment, tous ses enfants sont insérés, dans le même ordre, avant refChild. Si le newChild est déjà dans l'arborescence, il est d'abord supprimé.

L'approche Jquery mentionnée en haut fonctionnera. Vous pouvez également utiliser JQuery et CSS. Dites par exemple sur Div one que vous avez appliqué class1 et div2 vous avez appliqué la classe class2 (par exemple, chaque classe de css fournit une position spécifique sur le navigateur), maintenant vous pouvez échanger les classes utiliser jquery ou javascript (cela changera la position)

Désolé d'avoir heurté ce fil, j'ai trébuché sur le problème "swap DOM-elements" et j'ai joué un peu

Le résultat est une "solution" native de jQuery qui semble vraiment jolie (malheureusement, je ne sais pas ce qui se passe au niveau des composants internes de jQuery en faisant cela)

Le code:

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

La documentation jQuery dit que cela insertAfter() déplace l'élément et ne le clone pas