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>

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

jQuery .append only moving inner elements of target div

jquery

append

prepend