Jquery 只追加目标div的移动内部元素

我试图通过jquery将html div元素移动到页面上的另一个位置，而不是复制

我目前正在尝试使用.append执行此操作

$('#append-options').append($('#wsite-com-product-options').html());

这个代码，wile功能，给了我不想要的结果。第一个问题是，它只是将子内容移动到#wsite com产品价格区div中，而不是div本身。第二，这不仅仅是移动元素，而是复制它们，导致移动的元素在页面上出现两次

很明显，我对jquery相当熟悉。我知道在jquery中还有其他移动元素的方法，但我不确定哪种方法是合适的。这是我在页面上使用的完整脚本，它还做了一些其他事情

<script type="text/javascript">
(function($) {
  $(function() {
    $('#append-options').append($('#wsite-com-product-options').html());
    $('#insert-after-here').prepend($('#wsite-com-product-price-sale').html());
    $('#insert-after-here').prepend($('#wsite-com-product-price-area').html());
    var $btn = $('#wsite-com-product-buy');
    $('.wsite-product-description').first().append('<div id="something-cool"/>');
    $btn.appendTo('#something-cool').css('top', 0);
  });
})(jQuery);
</script>

（函数（$）{
$（函数（）{
$（'#append options'）.append（$（'#wsite com产品选项'）.html（））；
$（“#在此之后插入”）.prepend（$（“#wsite com产品价格销售”）.html（））；
$（“#在此之后插入”）.prepend（$（“#wsite com产品价格区”）.html（））；
var$btn=$（“#wsite com产品购买”）；
$（'.wsite产品说明'）.first（）.append（''）；
$btn.appendTo（“#something cool”）.css（'top'，0）；
});
})（jQuery）；

不要在上面调用

.html

：

$('#append-options').append($('#wsite-com-product-options'));
// No `.html()` here --------------------------------------^

这将移动元素本身，包括移动其子元素。它还避免了不必要的元素字符串，然后往返解析回元素，从而保留可能附加到元素的数据和事件处理程序

例如：

$（“输入”）。单击（“单击”，函数（）{
var target=$（“#top”）.children（）.length？”#bottom:“#top”；
$（目标）.append（$（“.moveable”）；
});
#顶部{
宽度：200px；
高度：120px；
边框：1px纯黑；
保证金权利：4px；
}
#底部{
宽度：200px；
高度：120px；
边框：1px纯黑；
}
.可移动{
显示：内联块；
宽度：100px；
边框：1px纯绿色；
}

我是那个会动的人。
注意我有子元素
太好了，效果很好@T.J.Crowder。只是好奇，.html（）实际上是做什么的，我应该从脚本的其他元素中删除它吗？@AlexRitter:有效地检索调用它的jQuery集中第一个元素的
innerHTML
属性。访问
innerHTML
要求浏览器在所有子节点（子节点及其子节点等）之间旋转，建立表示它们的HTML标记字符串。除非您需要标记，否则通常不希望使用
.html（）
。大多数情况下，您希望使用元素（实际对象），而不是标记。我无法解释脚本的其余部分，但您可能不希望看到它，不..html（）与本机javascript属性innerHTML非常相似，它只针对所选元素内部的所有html。