How to append an element (div) that contains multiples elements inside using jQuery?

Question

I have an object <div> that contains many divs inside. And a simple button. What I want is to create the first object any time the button is clicked.

For now I can only create the object but empty, how can I do to create the div with all their child (the "hello" inside)?

Here is a simple script

 $(".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

Here is one possible solution. Your container div can be thought of as a container of child div elements. So you will want to clone your object, and then append it to this container.

Check out this snippet.

 $(".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> 

Another possible solution is to use 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

If you want it to be a copy of the first item you can use clone() . If the element is not supposed to be in there to start, than add the element somewhere else to the page and select it.

 $(".button").click(function(){ var cont = $(".container"), div = cont.find(".object").eq(0).clone(); cont.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 3

Here you go...clone it with true which means it copies everything including events etc... then append that clone.

If i helped please vote for my answer. :)

 $(".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>