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 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
$(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
