将一个div元素移动到dom中的另一个位置

Question

以下代码是动态插入到DOM中的。但是，我想将div#example从它所在的位置移动并添加到#wrapper之前。如何使用jQuery实现这一点？

<div id="wrapper">
     <div id="div1">
          <div id="example">
          </div>
     </div>
     <div id="div2">

     </div>
</div>

我尝试使用$('#wrapper').prepend('#example');

但这只是将文本#example（而不是div）添加到#wrapper中。

- sean

Answer 1

您可以使用以下两种方式之一将元素example添加到元素wrapper的开头处： $('#wrapper').prepend( $('#example') ); 或 $('#example').prependTo('#wrapper');

- davin

---

@sean：Davin的代码能够实现效果而你的不能，是因为jQuery无法知道你的'#example'不是要作为“文本”添加到wrapper div中。通过传递一个jQuery对象，我们确保它知道应该执行什么操作。 - T.J. Crowder

我相信这里提供的代码是正确的，但是它们似乎都对我不起作用。原因可能是因为#wrapper本身在页面加载时被动态插入了？如果是这样，我该如何解决？ - sean

或者如果你想让它在前面，使用 $('#example').insertBefore('#wrapper');。 - phyatt

Answer 2

使用选择器的另一种方式

$("#example").prependTo("#wrapper")

这里有一个JSFiddle示例，证明它可以按预期工作。如果这段代码在您的情况下似乎不起作用，请编写自己的JSFiddle，以便我们可以看到您的代码存在什么问题。

- Robert Koritnik

---

我相信这个也是正确的，但对我不起作用。原因可能是因为#wrapper本身在页面加载时被动态插入了？ - sean

@sean：除非它还没有插入到DOM中。 - Robert Koritnik

已经插入了，并且我确保在另一个代码后面包含了你的代码。可能出了什么问题？ - sean

@sean：你是否正在使用Ajax调用异步加载原始的#wrapper内容？ - Robert Koritnik

@sean：如果您不这样做，我真的建议您编写一个简化版本的代码示例，以证明它在您的情况下无法工作。不要添加太多无关紧要的细节（没有最好）。 - Robert Koritnik