Hello friends,
Today we learn how to make clone of an element using jQuery. In jQuery, clone() method is used to make clone or copy of a set of element or a particular element. This method makes not only the copy of element but also it's child, attributes and content also. In other words, we can say that this method create the duplicate element of a particular element.
Syntax:
$(selector).clone(true|false)
selector is the element whose clone we want to creator. true | false means whether to make the copy of the event handler or not. By default value is false
Let's take and example to understand this method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p:first").clone(true));
$("div").clone().appendTo("body"); ;
});
});
</script>
</head>
<body>
<div>
<p>first para</p>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>
<button>Create clone of the element</button>
</body>
</html>
In above example, when you click on the button one time it will make the copy of p and the div element. If you will again click it will again make the copy and so on.
0 Comment(s)