Elément mobile JavaScript dans le DOM

Question

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 va bien.

Answer 1

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, third
 

Cela tient compte du fait que getElementsByTagName renvoie une liste de nœuds active qui est automatiquement mise à jour pour refléter l'ordre des éléments dans le DOM lors de leur manipulation.

Vous pouvez aussi 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, third
 

et il y a 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 :-)

Answer 2

Trivial avec jQuery

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

Si vous souhaitez le faire de manière répétée, vous devrez utiliser différents sélecteurs, car les div conserveront leurs identifiants lors de leurs déplacements.

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

Answer 3

 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 l'utiliser comme ça:

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

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

Answer 4

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 sembler étrange, mais il s'appuie fortement sur les normes afin de fonctionner correctement. En fait, il semble mieux fonctionner que la version jQuery qui tvanfosson publié qui semble faire le swap que deux fois.

Quelles sont les normes particularités t-il compter sur?

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

Answer 5

Si vous avez jQuery sur la page, cet article devrait répondre à votre question .