使用 jQuery 移动动态 HTML ( 追加/复制 )

Question

我想将用php动态生成的Html内容移动到外部div中：

前任。

<div class="top-category>
    <div class="cat-container">Category</div>
        <div class="categoryA">CatA</div>
        <div class="categoryB">CatA</div>
        <div class="categoryC">CatA</div>
        <div class="categoryD">CatA</div>
    </div>
</div>

我想将所有内容移动到下面的另一个div 中：

<div class="bottom-container">HERE ALL CONTENT</div>

我如何通过jQuery做什么？

Answer 1

您可以使用$.detach()从正文中删除所需的 DOM 元素，然后附加到目标 DOM 元素，如下所示：

$("div.bottom-container").append($("div.top-category" ).detach());

Answer 2

$('.top-category').clone().appendTo('.bottom-container');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-category">
    <div class="cat-container">Category</div>
        <div class="categoryA">CatA</div>
        <div class="categoryB">CatA</div>
        <div class="categoryC">CatA</div>
        <div class="categoryD">CatA</div>
    </div>
</div>
<br><br>
<div class="bottom-container">HERE ALL CONTENT</div>

Answer 3

我假设您想将"顶部类别"的内容移动到"底部容器"

这是它的jquery代码

$(function(){
    var $child = $(".top-category > div").detach();
    $(".bottom-container").append($child);
})

这是有效的JSFiddle代码

Answer 4

你可以

这样做：

<script type="text/javascript">
$(document).ready(function() {
    $( ".top-category" ).appendTo( ".bottom-container " );
});
</scrript>