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方法。