jQuery duplicate/copy/clone html element; In this jQuery tutorial you will learn how to copy selected HTML elements like div, span, button, paragraph tag etc using jQuery clone () method.
jQuery Copy/Clone/Duplicate Html Elements
The jQuery clone () method is used to create a copy or duplicate 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
$(selector).clone(true|false);
Parameters of 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 clone() method
This example will demostrate you 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>
Output
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
In the above clone() method example, First of all When you click on button that copy of selected html elements.
Recommended jQuery Tutorials
- jQuery Text Method By Example
- Get and Set Input, Select box, Text, radio Value jQuery
- jQuery Replace Html Content, Text
- jQuery Animate() Effect Method By Example
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
