CODEWITHSUNDEEP
javascriptjqueryhtml
venkatesh52
venkatesh52

Reputation: 99

How to clone contents inside a div to other div

How can I display the contents of user updated div(container1) in other div (container2)

 <div id="container1">
   <div id="slide1"> Content here include input box, select dropdown, normal text </div>
   <div id="slide2"> Editable Table </div> 
   <div id="slide3"> Editable images </div>

   //Each slide will be hidden after it is updated
</div>

<div id="container2">
//Basically this is editable summary of all the slides
//But by using clone, only empty text box/dropdowns are displayed
//How to display the contents of updated slide1, slide2 and slide3 so that it can be editable like in previous container1 (replicating the container1)

</div>

Upvotes: 0

Views: 106

Answers (4)

Balaji Marimuthu
Balaji Marimuthu

Reputation: 2058

use this $("#container2").append($("#container1").html());

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

  $(function() {

	  $("#click").click(function(){
		  $("#container2").append($("#container1").clone());
	  });
	  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1">
   <div id="slide1"> Content here include input box, select dropdown, normal text </div>
   <div id="slide2"> Editable Table </div> 
   <div id="slide3"> Editable images </div>
</div>

<div id="container2">

</div>
 <button id="click">Clone It!</button>

Upvotes: 1

Daniel Stackenland
Daniel Stackenland

Reputation: 3239

With jquery:

$("#container2").html($("#container1").html());

Upvotes: 2

CodingIntrigue
CodingIntrigue

Reputation: 78525

If you want to append:

$("#container2").append($("#container1").clone().children());

Demo

If you want to replace:

$("#container2").empty().append($("#container1").clone().children());

Upvotes: 3

Related Questions