Javascript 如何使用jquery在每次单击时动态生成包含所有元素的div

我试图使用下面的代码动态生成div，但是新的div不包含我现有div容器的元素

Below is the code which I tried:   

如何在不为现有div中的每个元素编写append函数的情况下，将我的内部div的所有元素（都来自inner1和inner2 div）动态地创建到新生成的元素中，我缺少什么

另外，如何删除使用按钮单击新创建的div

$（函数（）{
$（“#添加”）。单击（函数（）{
div=document.createElement（'div'）；
$（div.addClass（“内部”）.html（“新内部div”）；
$（“#容器”）。追加（div）；
});
});
#容器{
边框：1px纯红；
宽度：100%；
高度：330px；
}
.内部{
边框：1px纯绿色；
宽度：100%；
高度：300px；
}
.1{
位置：相对位置；
宽度：50%；
身高：100%；
浮动：左；
背景#8080；
背景色：#808080；
溢出：隐藏；
}
.2{
位置：相对位置；
宽度：50%；
身高：100%；
浮动：左；
背景：绿色；
背景颜色：绿色；
溢出：隐藏；
}

输入名称：


输入名称：


添加DIV
您可以为此使用.clone（）

$("#add").click(function () {
    $("#container").append($(".inner").clone());
});
$("#remove").click(function () {
    $("#container .inner:last").remove();
});


clone（）
将返回指定元素的副本
append（）
将添加一个元素作为指定父元素的最后一个子元素
remove（）
将从dom中删除指定的元素
您可以使用.clone（）进行此操作

$("#add").click(function () {
    $("#container").append($(".inner").clone());
});
$("#remove").click(function () {
    $("#container .inner:last").remove();
});


clone（）
将返回指定元素的副本
append（）
将添加一个元素作为指定父元素的最后一个子元素
remove（）
将从dom中删除指定的元素
这是来自您的JSFIDLE的

$(function () {
        $("#add").click(function () {
            div = document.createElement('div');
            $(div).addClass("inner").html($('.inner').clone());
            $("#container").append(div);
        });
    });

您也可以这样做：

$(function () {
        $("#add").click(function () {
            $("#container").append(
                $('<div>').addClass('inner').html($('.inner').clone())
            );

        });
    });

$（函数（）{
$（“#添加”）。单击（函数（）{
$（“#容器”）。追加(
$（''）.addClass（'inner'）.html（$（'.inner'）.clone（））
);
});
});
这是您的JSFIDLE提供的

$(function () {
        $("#add").click(function () {
            div = document.createElement('div');
            $(div).addClass("inner").html($('.inner').clone());
            $("#container").append(div);
        });
    });

您也可以这样做：

$(function () {
        $("#add").click(function () {
            $("#container").append(
                $('<div>').addClass('inner').html($('.inner').clone())
            );

        });
    });

$（函数（）{
$（“#添加”）。单击（函数（）{
$（“#容器”）。追加(
$（''）.addClass（'inner'）.html（$（'.inner'）.clone（））
);
});
});

可以选择包含inner1和inner2元素的父元素。然后使用html函数获取该元素中的所有html，并将其传递给正在尝试填充的元素上调用的append函数

可以选择包含inner1和inner2元素的父元素。然后使用html函数获取该元素中的所有html，并将其传递给正在试图填充的元素上调用的append函数。
来吧，在这里发布代码，而不是使用hack发布JSFIDLE链接。Stackoverflow有snipplets，这就像使用JSFIDLE一样。您好，添加了代码。。请检查一下out@SathishPanduga答案符合你的要求吗？你好，谢谢！来吧，在这里发布代码，而不是使用hack来发布JSFiddle链接。Stackoverflow有snipplets，这就像使用JSFIDLE一样。您好，添加了代码。。请检查一下out@SathishPanduga答案符合你的要求吗？你好，谢谢！