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

Question

我正在尝试使用以下代码动态生成 div，但新的 div 不包含我现有的 div 容器的元素。

Below is the code which I tried:   

http://jsfiddle.net/sathish_panduga/bvb7msne/2/

我们如何动态地将我内部 div 的所有元素(全部来自 inner1 和 inner2 div)创建到新生成的元素中，而无需为现有 div 中的每个元素编写追加函数，我在那里缺少什么？

另外，如何删除点击按钮新建的div？

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

#container {
  border: 1px solid red;
  width: 100%;
  height: 330px;
}
.inner {
  border: 1px solid green;
  width: 100%;
  height: 300px;
}
.inner1 {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  background: #808080;
  background-color: #808080;
  overflow: hidden;
}
.inner2 {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  background: green;
  background-color: green;
  overflow: hidden;
}

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<div id="container">
    <div class="inner">
            <div class="inner1">
                <section>
                    Enter Name:<input type="text" /><br /><br />
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Colorful_Parrots_Couple.jpg" width="200" height="200" />
                </section>
            </div>
        <div class="inner2">
            <section>
                Enter Name:<input type="text" /><br /><br />
                <img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Colorful_Parrots_Couple.jpg" width="200" height="200" />                
            </section>
        </div>
    </div>
</div>
<button id="add">Add DIV</button>

Answer 1

您可以为此使用 .clone()，

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

Fiddle

1. clone() 将返回指定元素的副本
2. append() 将添加一个元素作为指定父元素的最后一个子元素。
3. remove() 将从dom中删除指定的元素