Élément mobile JavaScript dans le DOM

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 conservent 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 si banale:

 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 prend en compte le fait que getElementsByTagName renvoie un NodeList en direct qui est automatiquement mis à jour pour refléter l'ordre des éléments dans les DOM à mesure qu'ils sont manipulés.

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

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 🙂

 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 sembler étrange, mais elle dépend fortement des normes pour fonctionner correctement. En fait, il peut sembler fonctionner mieux que la version jQuery que tvanfosson a posté, ce qui semble faire le swap seulement deux fois.

À quelles spécificités de normes s'appuie-t-il?

InsertBefore Insère le nœud newChild avant le nœud enfant existant refChild. 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 nouveauChild est déjà dans l'arbre, il est d'abord supprimé.

L'approche de Jquery mentionnée au sommet fonctionnera. Vous pouvez également utiliser JQuery et CSS. Pour par exemple sur Div 1, vous avez appliqué classe1 et div2, vous avez appliqué la classe classe2 (par exemple, chaque classe de css fournit une position spécifique sur le navigateur), vous pouvez maintenant échanger les classes avec jquery ou Javascript (cela changera le poste)

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

Le résultat est une «solution» jQuery-native qui semble être très jolie (malheureusement, je ne sais pas ce qui se passe aux internautes jQuery en faisant cela)

Le code:

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

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