Ro6gnol gazouillis en vrac

4oct/112

Comment échanger 2 noeuds en Javascript

Peut-être ai-je mal cherché, mais je n'ai pas trouvé comment échanger 2 noeuds en Javascript.
Même avec "swap nodes" pour étendre ma recherche sur des sites anglais, rien d'évident.
Aussi je me suis lancé pour faire cette fonction javascript.
Jusqu'au jour ou un commentaire dira : "Si tu avais regardé dans la librairie 'machin' il y a déja la fonction 'trucmuche' alors pourquoi réinventer la roue banane !".:-)

Voici le source HTML qui sert de base de test.
Il y a trois div. Le premier div et le troisième contiennent d'autre noeuds, pour montrer que la fonction déplace réellement le noeud, et donc avec tous ses enfants si nécessaire.

Principe de fonctionnement :
  Faire une copie ( clone ) des noeuds à échanger
  Modifier leur id pour les injecter au bon endroit sans conflit d'id.
  Supprimer les originaux.
  Remettre les id des originaux dans les copies

Voici le code javascript :

<script>
function swapNode(element1, element2)
{
 if(typeof element1=="string"){element1=document.getElementById(element1);};
 if(typeof element2=="string"){element2=document.getElementById(element2);};
 if(!element1 || !element2){return null;};

 var clone1=element1.cloneNode(true); var clone2=element2.cloneNode(true);

   old_id1= element1.id;
   old_id2= element2.id;

 var parent1=element1.parentNode;  var parent2=element1.parentNode;
 
 parent1.insertBefore(clone2,element1);
 parent2.insertBefore(clone1,element2);
 parent1.removeChild(element1); parent2.removeChild(element2);

   element1.id = old_id1;
   element2.id = old_id2;
}

</script>

Share Button
Commentaires (2) Trackbacks (0)
  1. Merci pour cette fonction fort utile, je pense cependant que tu as fait une erreur ici :

    var parent1=element1.parentNode; var parent2=element1.parentNode;

    Je pense qu’il faudrait remplacer cette ligne par :
    var parent1=element1.parentNode; var parent2=element2.parentNode;

  2. Bien vu, merci !


Leave a comment


1 + huit =

Aucun trackbacks pour l'instant