Cloning of Object using jQuery
For cloning any any object using jQuery, jQuery provides clone() method which is performing a deep copy of the set of matched elements i.e clone method not only copies the matched elements but also all descendant elements and text nodes of the matched element.
Example of cloning of any object using clone() method of jQuery:
<!doctype html>
<head>
<title>JQuery Clone Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h3>JQuery Clone Method Example</h3>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".myappend").clone().appendTo("body");
});
});
</script>
<body>
<button>Insert element</button>
<div class="myappend">
<p>Hello World!!!</p>
<div class="myappend2">
<p>Demo</p>
</div>
</div>
</body>
</html>
Explanation:
In the above example of clone() method, when button is clicked then deep copy of matched element i.e div with class myappend is created. Clone() method not only make duplicate copy of selected element but also copy of it's descendants in this case copy of div with class myappend2 within selected element is also made. After clicking of button output is:
JQuery Clone Method Example
Hello World!!!
Demo
Hello World!!!
Demo
0 Comment(s)