jQuery .append仅移动目标div的内部元素

Question

我正在尝试通过jquery移动而不是将html div元素复制到页面上的其他位置。

我目前正在与.append

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

此代码，欺骗功能要做到这一点，是给我意想不到的结果。第一个问题是，它只是在＃wsite-com-product-price-area 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> 

Answer 1

不要调用它.html：

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

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

例子：

$("input").on("click", function() { 
 
    var target = $("#top").children().length ? "#bottom" : "#top"; 
 
    $(target).append($(".moveable")); 
 
});

#top { 
 
    width: 200px; 
 
    height: 120px; 
 
    border: 1px solid black; 
 
    margin-right: 4px; 
 
} 
 
#bottom { 
 
    width: 200px; 
 
    height: 120px; 
 
    border: 1px solid black; 
 
} 
 
.moveable { 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 1px solid green; 
 
}

<div> 
 
    <div id="top"></div> 
 
    <div id="bottom"> 
 
    <div class="moveable"> 
 
     I'm the one that moves. 
 
     Note I have <strong>child elements</strong> 
 
    </div> 
 
    </div> 
 
</div> 
 
<input type="button" value="Click to move"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>