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.
The syntax of a jQuery clone( )
$(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 mention below :
Example #1
Example of jQuery clone( ) method 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>
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
Example of jQuery clone( ) method with parameter as true. Next, example code where this method is used to clone only 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>
Example #3
Example of jQuery clone( ) method 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>
Example #4
Example of jQuery clone( ) method 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>
Code:
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$( “p” ).text( “InnerHeight for div1 session:” + $( “#div1″ ).innerHeight()+ ” InnerHeight for div2 session:” + $( “#div2″ ).innerHeight()+ ” InnerHeight for div3 session:” + $( “#div3” ).innerHeight());
});
});
</script>
</head>
<body style=”background-color: beige;”>
<div id=”div1″ style=”height:50px;width:50px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;”></div><br>
<div id=”div2″ style=”height:100px;width:100px;padding:10px;margin:3px;border:1px solid blue;background-color:lightgreen;”></div><br>
<div id=”div3″ style=”height:150px;width:150px;padding:10px;margin:3px;border:1px solid blue;background-color:lightsalmon;”></div><br>
<p></p>
<button>Click here to display heights of the div sessions</button>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
//InnerHeight() is used to set the height to 500px
$(“div”).innerHeight(500)
$( “p” ).text( “InnerHeight for div session:” + $( “div” ).innerHeight() );
});
});
</script>
</head>
<body style=”background-color: beige;”>
<div style=”height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;”></div><br>
<p></p>
<button>Click here to update the inner height of div</button>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<body>
<div id=”idDiv” style=”height:100px;width:350px;padding:50px;margin:3px;border:1px solid blue;background-color:lightblue;”>This is the div session</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
//The height of the div element is decided by the function output of myfunc() and //given as input argument to innerHeight()
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).innerHeight(ChangeDivStyle());
$( “p” ).text( “InnerHeight for div session:” + $( “div” ).innerHeight());
});
});
function ChangeDivStyle()
{
document.getElementById(“idDiv”).style.backgroundColor=”Grey”;
return 100+$( “div” ).innerHeight()
}
</script>
<body style=”background-color: beige;”>
<button>Click here to call innerheight()</button>
<p></p>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$( “p” ).text( “InnerHeight for div1 session:” + $( “#div1″ ).innerHeight()+ ” InnerHeight for div2 session:” + $( “#div2″ ).innerHeight()+ ” InnerHeight for div3 session:” + $( “#div3” ).innerHeight());
</script>
</head>
<body style=”background-color: beige;”>
<div id=”div1″ style=”height:50px;width:50px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;”></div><br>
<div id=”div2″ style=”height:100px;width:100px;padding:10px;margin:3px;border:1px solid blue;background-color:lightgreen;”></div><br>
<div id=”div3″ style=”height:150px;width:150px;padding:10px;margin:3px;border:1px solid blue;background-color:lightsalmon;”></div><br>
<p></p>
<button>Click here to display heights of the div sessions</button>
</body>
</html>
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.
want to learn more about programming visit mcp