jQuery duplicate DIV into another DIV
JavascriptJqueryHtmlJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
You'll want to use the clone() method in order to get a deep copy of the element:
$(function(){
var $button = $('.button').clone();
$('.package').html($button);
});
Full demo: http://jsfiddle.net/3rXjx/
From the jQuery docs:
> The .clone() method performs a deep copy of the set of matched > elements, meaning that it copies the matched elements as well as all > of their descendant elements and text nodes. When used in conjunction > with one of the insertion methods, .clone() is a convenient way to > duplicate elements on a page.
Solution 2 - Javascript
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>
Solution 3 - Javascript
You can copy your div like this
$(".package").html($(".button").html())
Solution 4 - Javascript
Put this on an event
$(function(){
$('.package').click(function(){
var content = $('.container').html();
$(this).html(content);
});
});
Solution 5 - Javascript
$(document).ready(function(){
$("#btn_clone").click(function(){
$("#a_clone").clone().appendTo("#b_clone");
});
});
.container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Clone Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<p id="a_clone"><b> This is simple example of clone method.</b></p>
<p id="b_clone"><b>Note:</b>Click The Below button Click Me</p>
<button id="btn_clone">Click Me!</button>
</div>
</body>
</html>