如何使用jQuery追加包含多个元素的元素（div）？

Question

我有一个对象<div>，其中包含许多div。还有一个简单的按钮。我想要的是在点击按钮的任何时候创建第一个对象。

现在我只能创建对象但是空了，我怎么能用他们所有的孩子创建div（＆＃34;你好＆＃34;里面）？

这是一个简单的脚本

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

如果您希望它是第一个项目的副本，则可以使用clone()。如果该元素不应该在那里开始，那么将元素添加到页面的其他地方并选择它。

＆＃13;

＆＃13;

$(".button").click(function(){
	var cont = $(".container"),
        div = cont.find(".object").eq(0).clone();    
    cont.append(div);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这里你去...用true克隆它，这意味着它复制包括事件等在内的所有内容......然后附加该克隆。

如果我帮忙，请投票给我答案。 ：）

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

  //new stuff
   var clone = $(".object").clone(true);
   $(".container").append(clone);
});

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