Comment déplacer un élément HTML dans jQuery?

Question

Ma structure HTML est comme ceci:

 <div id="parent">
   <div id="1">Some content</div>
   <div id="2">Some content</div>
</div>
 

Je veux déplacer l'élément id="2" pour le placer avant id="1" afin que ce soit comme ceci:

 <div id="parent">
   <div id="2">Some content</div>
   <div id="1">Some content</div>
</div>
 

Comment faire quelque chose comme ça dans jQuery?

Answer 1

Vous pouvez utiliser .insertBefore(), comme ceci:

$("#2").insertBefore("#1");

Ou, .prependTo(), comme ceci:

$("#2").prependTo("#parent");

...ou l'inverse à l'aide de #1 et .insertAfter() et .appendTo()...ou de plusieurs autres façons en fait, cela dépend de ce que vous êtes après, les 2 méthodes doit être la plus courte possible, cependant, étant donné que 2 Id.

Je suis en supposant que c'est juste un exemple, n'oubliez pas d'utiliser des Id qui ne commencent pas par un nombre dans une réelle HTML4 page, ils sont invalides et causer plusieurs problèmes.

Answer 2

Faites simplement:

 $('#1').before($('#2'));
 

Answer 3

Avez-vous déjà pensé à utiliser jQuery UI Sortable ?