Need some jquery help copying a DIV into another DIV and hoping that this is possible. I have the following HTML:
<div class="container">
<div class="button"></div>
</div>
And then I have another DIV in another location in my page and I would like to copy the 'button' div into the following 'package' div:
<div class="package">
Place 'button' div in here
</div>
This question is related to
javascript
jquery
html
$(document).ready(function(){ _x000D_
$("#btn_clone").click(function(){ _x000D_
$("#a_clone").clone().appendTo("#b_clone"); _x000D_
}); _x000D_
}); .container{_x000D_
padding: 15px;_x000D_
border: 12px solid #23384E;_x000D_
background: #28BAA2;_x000D_
margin-top: 10px;_x000D_
}<!DOCTYPE html> _x000D_
<html> _x000D_
<head> _x000D_
<title>jQuery Clone Method</title> _x000D_
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> _x000D_
_x000D_
_x000D_
</head> _x000D_
<body> _x000D_
<div class="container">_x000D_
<p id="a_clone"><b> This is simple example of clone method.</b></p> _x000D_
<p id="b_clone"><b>Note:</b>Click The Below button Click Me</p> _x000D_
<button id="btn_clone">Click Me!</button> _x000D_
</div> _x000D_
</body> _x000D_
</html> Copy code using clone and appendTo function :
Here is also working example jsfiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="copy"><a href="http://brightwaay.com">Here</a> </div>
<br/>
<div id="copied"></div>
<script type="text/javascript">
$(function(){
$('#copy').clone().appendTo('#copied');
});
</script>
</body>
</html>
Put this on an event
$(function(){
$('.package').click(function(){
var content = $('.container').html();
$(this).html(content);
});
});
You can copy your div like this
$(".package").html($(".button").html())
Source: Stackoverflow.com