jQuery Clone/Duplicate Html Elements

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

Demo Clone Method

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

jQuery Clone/Duplicate Html Elements