jQuery .clonet()


The jQuery clone() method is used to make a copy of selected elements. It can also be used to clone child nodes, text and attributes.



Let us take a look at the example 


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<!--
Referencedesigner.com jQuery Tutorial showing usage of .get()
-->

<script>
$(document).ready(function(){
  $("button").click(function(){   
   $("b").clone().appendTo("p");
  });
});
</script>
</head>
<body>
<b>Michael </b>
<p>Hi </p>

<button>Click me to see action </button>
<div></div>
</body>
</html>


You may like to try this example here.

Here is another example 


<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
	var i = 0;
	jQuery(document).ready(function(e) {
		$('#btcopy').click(function(e) {
			i++;
			var clone = $('.root:last').clone();
			clone.html(clone.html()+" "+(i));
			clone.appendTo($('#container'));
        		});
	});
</script>
<title>Example 04</title>
</head>

<body>
    <input id='btcopy' type='button' value='make copy at first'/>
    <div id="container"></div>
    <div class="root">Content</div>
</body>
</html>


You may like to try this example here.

Arguments


The .clone method take one boolean argument that can have either true or false value. A true value indicates that event handlers also should be copied. A false value indicates that event handlers should not be copied