如何在jQuery中移动HTML元素？

Question

我的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中实现这样的操作？

- GusDeCooL

---

@rahul - 他们在HTML4中是无效的，考虑到最近的更改，请明确说明这一点 ;) - Nick Craver

@rahul：ID只是举例而已，真正的脚本当然不是那样的。 - GusDeCooL

Answer 1

您可以使用 .insertBefore()，示例代码如下：

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

或者，像这样使用.prependTo()：

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

您可以使用#1、.insertAfter()和.appendTo()等方法来实现向前或向后移动元素，还有其他几种方法，具体取决于您的需求。但是，如果您只是想在给定两个 ID 的情况下尽可能地缩短代码，请使用上述两种方法。

我假设这只是一个示例，请记住，在实际的 HTML4 页面中不要使用以数字开头的 ID，它们是无效的并会导致多个问题。

- Nick Craver

---

谢谢您的理解，如果我的ID只是举个例子的话。而且您的代码 $("#2").insertBefore("#1"); 解决了我的问题...非常感谢 :) - GusDeCooL

Answer 2

只需执行以下操作：

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

- David Tang

---

为什么要使用 $('#2') 而不是 '#2'？ - Francisco Corrales Morales

@FranciscoCorralesMorales 因为before方法期望参数是HTML字符串、DOM元素、元素数组或jQuery对象。'#2'不属于这些类型之一。 - actaram

Answer 3

Ever thought about using jQuery UI Sortable ?

- Pit