javascript - 如何使用 jQuery 追加一个包含多个元素的元素(div)？

Question

我有一个对象 <div>里面包含许多div。还有一个简单的按钮。我想要的是在单击按钮时创建第一个对象。

现在我只能创建对象但是空的，我怎么能用他们所有的 child (里面的“你好”)创建div？

这是一个简单的脚本

$(".button").click(function(){
	var div = document.createElement('div');
	div.className = 'object';
	$(".container").append(div);
});

.object{
  margin-top:10px;
  width:100px;
  height:50px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="button" type="button">
create an object
</button>
<div class="container">
<div class="object">
  <p>
  hello
  </p>
</div>
</div>

Answer 1

这是一种可能的解决方案。您的容器 div 可以被认为是子 div 元素的容器。所以你会想要克隆你的对象，然后将它附加到这个容器。

查看此代码段。

$(".button").click(function(){   
    $(".object:first").clone().appendTo("div.container");
});

.object{
  margin-top:10px;
  width:100px;
  height:50px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="button" type="button">
create an object
</button>
<div class="container">
  <div class="object">
    <p>
      hello
    </p>
  </div>
</div>

另一种可能的解决方案是使用 html()

$(".button").on("click", function() {
    $(".container").html($(".container").html() + "<div class='object'><p>Hello</p></div>");
});

.object{
      margin-top:10px;
      width:100px;
      height:50px;
      background-color:red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="button" type="button">
create an object
</button>
<div class="container">
  <div class="object">
    <p>
      hello
    </p>
  </div>
</div>