clone()

•   Create a deep copy of the set of matched elements.
•   We can use clone copy in to two ways,clone()/clone(true).It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements.First we see the clone()

METHOD 1 :  clone()

Use clone() to create a copy of the above elements, and place the copied elements after the div tag that contains a class name of  “mainDiv”.

HTML :

<div>
<p>Testing for clone() method in jquery
</div>

JQUERY :

$(‘.mainDiv’).clone().insertAfter(“.mainDiv”);

OUTPUT DOM :

<div>
<p>Testing for clone() method in jquery</p>
</div>

<div>
<p>Testing for clone() method in jquery
</div>

NOTE:
After executing JQ, the element which has class name as mainDiv will be copied and placed after the element which has class name of mainDiv

METHOD 2: clone(boolean)
It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements.

HTML :

<button id=”cloneBtn”>clone()</button>

JQUERY :

$(“#cloneBtn”).click(function () {

$(‘.mainDiv’).clone().insertAfter(“.mainDiv”);

});

STEP 1 : $(‘#cloneBtn’).clone().insertAfter(“#cloneBtn”);

Above will copy only element without any event handler.

STEP 2 ; $(‘#cloneBtn’).clone(true).insertAfter(“#cloneBtn”);

Above will copy event handler along with matched elements, you should use clone(true).

Note : For better understanding

 If we create button dynamically with the clone method,it will copy element and eventhandler(thats is action to be performed ) when we use
clone(true).