jQuery：将完整元素移到另一个元素中，而不是仅包含其内容

Question

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

并且有jQuery appendTo方法似乎为我做到了。

例如：

<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（）方法即可移动整个元素。

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

将转向

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

进入

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

Answer 2

只需通过以下方式在您自己的解决方案中排除.contents() ：

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

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

Answer 3

$.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 4

首先，Jquery的appendTo行为是在一个元素之后追加到另一个元素。 这样的行为是正确的。 也可能需要append方法。