jQuery clone/duplicate/copy elements; Through this tutorial, i am going to show you how to copy/clon e/duplicate selected html elements using jQuery clone () method.
jQuery Clone/Duplicate Html Elements
The jQuery clone () method is used to create copies of the selected html elements. It also makes copies of it’s child nodes, texts and attributes. The clone () method is a easy way to copy the elements on a webpage.
Syntax of jQuery Clone() Method
$(selector).clone(true|false);
Parameters of jQuery Clone() Method
- True :- Specifies that the event handler should also be copied.
- False :- This is a default parameter. Specifies that the event handler should not be copied.
Example for jQuery clone/duplicate Elements
See the example for how to copy selected html elements using clone () method:
<!DOCTYPE html> <html> <head> <title>jQuery Clone Method</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style type="text/css"> .container{ padding: 15px; border: 12px solid #23384E; background: #28BAA2; margin-top: 10px; } </style> <script> $(document).ready(function(){ $("#btn_clone").click(function(){ $("#a_clone").clone().appendTo("#b_clone"); }); }); </script> </head> <body> <div class="container"> <p id="a_clone"><b> This is simple example of clone method.</b></p> <p id="b_clone"><b>Note:</b>Click here, to clone c_clone id of elements, and append them to the b_clone id of element</p> <button id="btn_clone">Click Me!</button> </div> </body> </html>
Demo for jQuery clone/duplicate Elements
This is simple example of clone method.
Note:Click here, to clone c_clone id of elements, and append them to the b_clone id of element
Recommended jQuery Tutorial
Recommended:-jQuery SlideUp() Animation Example
Recommended:-jQuery SlideToggle Animation Effect Example
Recommended:-jQuery Replace HTML Content in Element
Recommended:-jQuery Replace Text in Div,Span, p, Textarea
Recommended:-jQuery Get and Set Input box By Name, Id
Recommended:-Get and Set CSS Property in jQuery
Recommended:-jQuery Insert Content Before or After an Element
Recommended:-jQuery HTML Append Prepend Example
Recommended:-jQuery Remove Text & Element From HTML
Recommended:-jQuery Add Remove Class on onClick
Recommended:-jQuery Set Checkbox Checked
Recommended:-jQuery Get Checkbox Checked Value
Recommended:-Get and Set Data Attribute Value in jQuery
Recommended:-jQuery Get Multiple Checkbox Value
Recommended:-jQuery Remove Attribute Disabled
Recommended:-jQuery Select Multiple HTML Elements
Recommended:-jQuery Get Data Id, Text Attribute Value