jQuery:将整个元素移动到另一个元素中，但不仅仅是它的内容

Question

源 DIV 元素必须出现在目标 DIV 中。

还有jQueryappendTo方法似乎可以为我做到这一点。

例如：

<div class="source">Move Me</div>
<div class="destination"></div>
jQuery(document).ready(function(){
jQuery('.source').contents().appendTo('.destination')
});

但实际上它只是将源的内容移动到目标 DIV 中，将空的源 DIV 保留在原来的位置：这是演示这一点的 JSFiddle。

所以，而不是

<div class="destination">
<div class="source">Move Me</div>
</div>

appendTo结果只是

<div class="source"></div>
<div class="destination">Move Me</div>

有没有办法实现

<div class="destination">
<div class="source">Move Me</div>
</div>

没有额外的包装元素？

Answer 1

$.contents()将获取元素的内容，但保留元素本身。$.append()和$.appendTo()的默认行为是移动整个元素。因此，在您的示例中，您只需要使用jQuery('.source').appendTo('.destination')，这将.source移动到.destination

jQuery('.source').appendTo('.destination')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">Move Me</div>
<div class="destination"></div>

Answer 2

只需摆脱 .content() 方法来移动整个元素。

$('.destination').append($('.source'))

将转

<div class="destination"></div>
<div class="source">Move Me</div>

到

<div class="destination">
<div class="source">Move Me</div>
</div>

Answer 3

只需在您自己的解决方案中排除.contents()，如下所示：

jQuery(document).ready(function(){
jQuery('.source').appendTo('.destination')
});

然后它将Div.source完全移动到Div.destination.这是小提琴：https://jsfiddle.net/NDFA/cur9qg2w/

Answer 4

首先。Jquery 的appendTo行为在一个元素之后追加到另一个元素。所以这种行为是正确的。此外，您可能需要append方法。