HTML METHODS - clone()

The clone() method in JQuery is used to make a copy of an existing HTML element.

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>

	<style>
    	div {
        	background-color: violet;
        }
    </style>

  	<body>
    	<h1> JQuery </h1>
    	<p>New Code</p>
        <div></div>
    	
    	<button> Click Here </button>
    	
      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('div').append($('p').clone());
			});
			
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have a <p> element,

<p>New Code</p>

And an empty <div> element,

<div></div>

So, in the JQuery statement,

$('button').click( function() {
	$('div').append($('p').clone());
});

All we are doing is, using the clone() method on the <p> element,

$('p').clone()

To make a copy of the <p> element.

Then we are taking the above copied <p> element,

$('div').append($('p').clone());

And appending with <div> element using the append() method.

And we are getting the <p> element inside the <div> element violet in color.

And why is the color violet?

Because we have set the style property for <div> element.

<style>
	div {
		background-color: violet;
	}
</style>

❮❮ PREV NEXT ❯❯