How to clone a div content into another div using jQuery?
To copy the content of a div into another div, we can use jQuery html(), clone(), append(), etc.
In jQuery html() function, it is the simplest approach to copy the content of a div into another div. This method is used to set or retrieve an element’s HTML content. This technique works well for swiftly duplicating a div’s complete content.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="cloneFrom" id="cloneFrom">
This is the content which needs to the clone.
</div>
<br />
<div class="cloneTo" id="cloneTo"></div>
</body>
<script>
var htmlContent = $("#cloneFrom").html();
$("#cloneTo").html(htmlContent);
</script>
</html>The clone() method is used to duplicate the selected items. When you wish to replicate the content of a div without removing it from its original spot, this method can be handy. This approach is useful for duplicating the div and attaching it to another element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="cloneFrom" id="cloneFrom">
This is the content which needs to the clone.
</div>
<br />
<div class="cloneTo" id="cloneTo"></div>
</body>
<script>
$('#cloneFrom').clone().appendTo('#cloneTo');
</script>
</html>