如何將div中的內容克隆到其他div

Question

如何在其他div（container2）中顯示用戶更新的div（container1）的內容

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

Answer 1

如果要附加：

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

演示版

如果要更換：

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

Answer 2

使用jQuery：

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

Answer 3

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

Answer 4

使用此$（“＃container2”）。append（$（“＃container1”）。html（））;