Question

我从不同的演示中进行了3种不同的“追加”操作，因为我试图使任何东西都起作用，但是它们似乎都没有任何作用。我知道jQuery有用，因为当我取消注释时，原始元素上的remove()可以正常工作。

你能告诉我我在这里想念的吗？您还可以告诉我应该使用哪种版本/区别是什么？

这里是我要建立的地方：Stable Demo

jQuery（在演示站点上）

jQuery(document).ready(function($) {

    $(".simplefilter").clone().appendTo($(".filtering-wrap")); // doesn't work
    $(".simplefilter").clone().append($(".filtering-wrap")); // doesn't work either
    $(".simplefilter").clone().appendTo(".filtering-wrap"); // also doesn't work
    $(".simplefilter").remove(); // This does work when enabled     

});

要克隆的过滤器代码（在演示站点上）

<ul class="simplefilter simplefilter_3985">
  <li class="active" data-filter="all">all</li>
  <li data-filter="1">Stores</li>
  <li data-filter="2">Creative</li>
  <li data-filter="3">Amazon</li>
</ul>

AppendTo容器

<div class="filtering-wrap"></div>

Answer 1

您可以选择元素，将其克隆附加到目标位置，然后将其删除。

jQuery(document).ready(function($) {
  var $filters = $('.simplefilter');
  
  $filters.clone().appendTo('.filtering-wrap');
  $filters.remove();
});

.filtering-wrap {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtering-wrap"></div>

<div class="simplefilter">Filter 1</div>
<div class="simplefilter">Filter 2</div>
<div class="simplefilter">Filter 3</div>

但是，实际上，如果要删除它们，只需移动它们而不克隆。

jQuery(document).ready(function($) {
  $('.simplefilter').appendTo('.filtering-wrap');
});

.filtering-wrap {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtering-wrap"></div>

<div class="simplefilter">Filter 1</div>
<div class="simplefilter">Filter 2</div>
<div class="simplefilter">Filter 3</div>

元素一次只能有一个父元素，因此尝试添加DOM中已经存在的元素将导致jQuery移动它们，而不创建重复元素。

克隆HTML块并将其附加到另一个div

1 个答案: