Bonjour à tous !

J'ai une liste d'éléments, de la forme suivante :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div id="elements">
  <div id="element1">...</div>
  <div id="element2">...</div>
  <div id="element3">...</div>
  ...
</div>
J'aimerais pouvoir les intervertir deux à deux, à la demande de l'utilisateur (typiquement, ré-ordonner la liste). Je sais comment accéder à un div particulier
Code : Sélectionner tout - Visualiser dans une fenêtre à part
var el2 = document.getElementById("element2");
, comment en supprimer un
Code : Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementById("elements").removeChild(el2);
et comment en insérer un à la fin de la liste, mais je n'ai aucune idée de comment en insérer un à une position spécifique ou l'intervertir avec un autre ?

Je pourrais faire différemment :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
// intervertir element1 et element2
var tmp = document.getElementById("element2").innerHTML;
document.getElementById("element2").innerHTML = document.getElementById("element1").innterHTML;
document.getElementById("element1").innterHTML = tmp;
Mais je me demandais s'il n'y avait pas une meilleure technique...

Merci d'avance !

EDIT: De plus, après essai, la techique proposée ci-dessus ne fonctionne pas, car je perds tout le contenu ajouté dynamiquement (onclick, etc...).