Question

我想在外部div中移动一个动态生成的Html内容：

实施例。

fieldset {
  min-width: 0;
}

我想把所有内容移到另一个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>

我如何通过jQuery做到？

Answer 1

你可以这样做：

<script type="text/javascript">

$(document).ready(function() {
    $( ".top-category" ).appendTo( ".bottom-container " );
});

</scrript>

Answer 2

您可以使用$.detach()从body中删除所需的DOM元素，然后按如下方式追加到目标DOM元素：

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我假设您要将“top-category”的内容移至“bottom-container”

这是jquery代码

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

这是JSFiddle的工作code

使用jQuery移动动态Html（附加/复制）

4 个答案: