Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to copy the content of a div into another div using jQuery?
We can use jQuery html() method to copy the content of a div into another div. In jQuery, many other methods, such as clone(), append() & appendTo(), etc., can be used to copy the content. jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. In this tutorial, we will use different methods in jQuery to copy the content of one div into another div.
Using the html() Method
Using the jQuery html() function is the simplest approach to copy the content of a div into another div. The html() method is used to retrieve or set an element's HTML content. It returns the element's current HTML content when called without any arguments. It sets the element's HTML content to the provided value when called with an argument. This technique works well for swiftly duplicating a div's complete content.
Example
For example, consider the following HTML −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div>output</div>
<br />
<div id="result"></div>
</body>
<script>
var html = $("#source").html();
console.log(html);
document.getElementById("result").innerHTML = html;
</script>
</html>
Using the append() and appendTo() Methods
Using the add() and appendTo() methods is another well-liked technique for replicating a div's content. Using these techniques, one element can be added to another element. While the appendTo() function is used to append the selected elements to an element, the attach() method is used to append an element to the selected elements. These techniques are excellent for replicating a div's whole structure, including its child elements.
Example
For example, consider the following HTML −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target">
<p>This is the target div.</p>
</div>
</body>
<script>
$("#source").children().appendTo("#target");
</script>
</html>
This will append all the children of the source div to the target div and the final result will be −
Using the clone() Method
Finally, we have the clone() method. 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.
Example
For example, consider the following HTML −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target"></div>
</body>
<script>
$('#source').clone().appendTo('#target');
</script>
</html>
This will create a copy of the source div and append it to the target div. The final result will be the same as before −
Using the innerHTML to Show the Output
Instead of using the console.log() function to display the output, we can use the innerHTML property of the div element.
Example
For example, consider the following HTML −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target"></div>
<div id="result"></div>
</body>
<script>
var html = $("#source").html();
document.getElementById("result").innerHTML = html;
</script>
</html>
This will copy the content of the source div to the result div and display it on the screen.
Conclusion
We learned how to use jQuery to copy the content of a div to another div in this blog post. The html() method, the add() and appendTo() methods, and the clone() technique have all been used to do this. We've also shown how to display the result on the screen using the innerHTML attribute. You'll be able to choose the optimal solution for your individual use case if you grasp these methods and their distinctions.
6K+ Views
