Intervertir deux div

Bonjour à tous !

J'ai une liste d'éléments, de la forme suivante :

Code:

---

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:

---

var el2 = document.getElementById("element2");

---

, comment en supprimer un

Code:

---

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:

---

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...).

sinon avec appendChild et insertBefore sans modifier les contenu, ce sont les divs complet qui bougeront ...

Merci beaucoup, c'est exactemenet ce que je cherchais !

Pour ceux que ça intéresserait, voici ma méthode (elle déplace id1 avant id2) :

Code:

---

1 2 3 4 5

function moveBefore(id1, id2) { var tmp = document.getElementsById(id1); document.getElementsById("elements").removeChild(document.getElementsById(id1)); document.getElementsById("elements").insertBefore(tmp, document.getElementsById(id2)); }

---