Updated March 20, 2023
Introduction to jQuery Clone()
The jQuery clone() method is to do a copy of the set of selected HTML elements. The method is a built-in method of jQuery. This method is an easy way to make a copy of the set of selected HTML elements on a page including its child nodes, attributes, and text.
Syntax:
$(selector).clone( true | false )Parameters
true | false – true | false parameter is an optional parameter, which is used to specify whether the event handler should be copied or not. The true parameter specifies that the event handler should be copied and the false parameter specifies that the event handler should not be copied. The false value is a default parameter.
Examples of jQuery clone()
Here are the examples mentioned below :
Example #1 – Without any parameters
Next, we write the html code to understand this method more clearly with the following example –
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery Clone( ) method </title>
<!-- code to show the jQuery clone( ) working method -->
<script>
$(document).ready( function(){
$("button").click( function(){
$( "h1" ).clone().appendTo( "body" );
});
});
</script>
</head>
<body>
<h1> <b> Heading one. </b> </h1>
<h1> <b> Heading two. </b> </h1>
<button> Click here, to clone all h1 elements and append them to the body element </button>
</body>
</html>The output of the above code is –
When we click on the button, the output is –
So in the above example, the first and second heading that is <h1>html element content is a clone and append to the body element.
Example #2 – With parameter as true
Next, example code where this method is used to clone only the first heading that is only first < h1 > element content and append to the body element, as in the below code –
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery clone( ) method </title>
<!-- code to show the jQuery clone( ) working method -->
<script>
$( document ).ready( function() {
$("button").click( function() {
$( "body" ).append($( "h1:first" ).clone( true ));
});
});
</script>
</head>
<body>
<h1> <b> Heading one. </b> </h1>
<h1> <b> Heading two. </b> </h1>
<button> Click here, to clone all h1 elements and append them to the body
element </button>
</body>
</html>The output of the above code is –
When we click on the button, the output is –
Example #3 – With parameter as true
In the next example code, we rewrite the above code for the method with animation, as shown in the below example –
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery clone( ) method </title>
<!-- code to show the jQuery clone( ) working method -->
<script>
$(document).ready( function() {
$( "button" ).click( function() {
$("body").append($( "h1:first" ).clone( true ));
});
$("h1").click(function() {
$(this).animate({
fontSize: "+=2px" ,
height: "200px",
width: "200px"
});
});
});
</script>
</head>
<body>
<h1> <b> Heading one. </b> </h1>
<h1> <b> Heading two. </b> </h1>
<button> Click here, to clone all h1 elements and append them to the body element </button>
</body>
</html>The output of the above code is –
When we click on the button, the output is –
When we click on the heading above to the button, the output is –
When we click on the heading below to the button (the clone heading), the output is –
Example #4 – with parameter as true
In the next example code, we write the html code for jQuery clone( ) method to clone the boxes when they are a click, as shown in the below example –
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery clone( ) method </title>
<style>
.div{ margin : 15px;
padding : 15px;
border : 3px solid #666;
width : 65px;
}
</style>
<!-- code to show the jQuery clone( ) working method -->
<script type = "text/javascript" language = "javascript" >
$(document).ready( function() {
$("div").click( function () {
$( this ).clone().insertAfter( this );
});
});
</script>
</head>
<body>
<h1> Click on any below square to clone it : </h1>
<div class = "div" style = "background-color : red;"> </div>
<div class = "div" style = "background-color: yellow;"> </div>
<div class = "div" style = "background-color: blue;"> </div>
</body>
</html>The output of the above code is –
When we click on any box for example yellow box, the output is –
Conclusion
The jQuery clone() method is to copy the set of selected html elements. This method is a built-in method of jQuery. The method is an easy way to make a copy of the set of selected html elements on a page including its child nodes, attributes, and text.
Recommended Articles
This is a guide to jQuery Clone(). Here we discuss the implementation of the jQuery clone() method with appropriate examples with and without parameters. You may also have a look at the following articles to learn more –
