Déplacer des éléments du DOM

Je souhaite monter/descendre des lignes dans un tableau en javascript/jquery.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<tr> <td> ligne 1 <button id=up_1 class="up">up<button> </button id=down_1 class="down">down</button> </td> </tr> <tr> <td> ligne 2 <button id=up_2 class="up">up<button> </button id=down_2 class="down">down</button> </td> </tr>

---

C'est assez simple en fait. Encore faut-il connaitre une subtilité du DOM souvent méconnue : lorsque tu essayes d'insérer un élément existant à un autre endroit (avec appenChild(), insertBefore(), etc.), ça a pour effet de déplacer l'élément référencé.

Exemple avec jQuery (mais facilement réalisable sans) :

http://jsfiddle.net/D8SY7/1/