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 --------------------------------------^

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

示例：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: