javascript – jQuery duplicate DIV into another DIV-ThrowExceptions

Exception or error:

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>
How to solve:

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.

###

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>

###

You can copy your div like this

$(".package").html($(".button").html())

###

Put this on an event

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});

###

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

For more detail and demo

Leave a Reply

Your email address will not be published. Required fields are marked *