web-dev-qa-db-fra.com

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

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" à placer avant id="1" donc ce sera comme ça:

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

Comment faire quelque chose comme ça dans jQuery?

javascriptjqueryhtmldom
40
GusDeCooL

Vous pouvez utiliser .insertBefore() , comme ceci:

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

Ou, .prependTo() , comme ceci:

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

... ou l'inverse en utilisant #1 et .insertAfter() et .appendTo() ... ou plusieurs autres façons en fait, cela dépend juste de ce que vous recherchez, les 2 méthodes ci-dessus devraient être les plus courtes possibles, étant donné 2 ID.

Je suis en supposant que ce n'est qu'un exemple, n'oubliez pas d'utiliser des identifiants qui ne commencent pas par un nombre dans une page HTML4 réelle, ils ne sont pas valides et provoquer plusieurs problèmes.

74
Nick Craver

Faites simplement:

$('#1').before($('#2'));
7
David Tang

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

3
Pit