Duplicate Html Elements Using jQuery By Example

In jQuery – How to copy the selected html elements. In this jQuery tutorial you will learn how to copy of selected html elements using jQuery clone () method.

jQuery clone()

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

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

In the above clone() method example, First of all When you click on button that copy of selected html elements.