Как переместить элемент HTML в jQuery?

Моя структура HTML такова:

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

Я хочу переместить элемент id="2" на место перед id="1", чтобы он был таким:

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

Как мне сделать что-то подобное в jQuery?

Ответы

Ответ 1

Вы можете использовать .insertBefore(), например:

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

Или .prependTo(), например:

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

... или наоборот, используя #1 и .insertAfter() и .appendTo()... или несколько других способов на самом деле, это просто зависит от того, что вы на самом деле после, вышеупомянутые 2 метода должны быть о кратчайшем возможном, хотя, учитывая 2 идентификатора.

Я предполагаю, что это всего лишь пример, не забудьте использовать идентификаторы, которые не начинаются с номера на реальной странице HTML4, они недействительны и вызывают несколько проблем.

Ответ 2

Просто выполните:

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

Ответ 3

Когда-либо думал об использовании jQuery UI Sortable?