How to clone an element using jQuery

December 1, 2022 XpertPhp

In this article, we will explain to you how to clone an element using jQuery. so we will give you a simple example of how to clone an element using jQuery.

Example: jQuery clone() method
In this example, we use the jQuery clone() method to copy all elements and paste that into the specific element. so you can follow the below example.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").clone().appendTo(".color");
  });
});
</script>
</head>
<body>

<p>red</p>
<p>white</p>

<div class="color"></div>

<button>Clone all colors, and append to all colors in specific element</button>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").clone().appendTo(".color");

});

</script>

</head>

<body>

<p>white</p>

<button>Clone all colors, and append to all colors in specific element</button>

</body>

</html>

Please follow and like us:

Related posts: