jQuery clone() Method

Last Updated:

jQuery clone() Method

The jQuery clone() method creates a deep copy of the set of matched elements, including child nodes, text and attributes.

The following example will clone the element without event handlers.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery clone() Method</h1> <p class="point">Try to click on this paragraph as well</p> <button>clone</button> <script> $(document).ready(function(){ $("button").click(function(){ // clone(false) $("p").clone().appendTo("body"); }); $(".point").click(function(){ alert("you clicked"); }); }); </script> </body> </html>

Syntax

$(selector).clone(bool);

Parameter Values

Value Type Explanation
bool Optional Specifies that whether the event handlers should also be copied or not.
Possible values are
  • true - event handlers should be copied
  • false - event handlers should not be copied
Default value of bool is false.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
clone()YesYesYesYesYesYesYesYesYesYesYesYesYes

clone() with Event Handlers

The following example will clone the element with event handlers.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery clone() Method</h1> <p class="point">Try to click on this paragraph as well</p> <button>clone</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").clone(true).appendTo("body"); }); $(".point").click(function(){ alert("you clicked"); }); }); </script> </body> </html>

Share this Page

Meet the Author