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>
