How to copy the content of a div into another div using jQuery ?
Last Updated :
25 Aug, 2023
Given an HTML document containing some div element and the task is to copy a div content into another div as its child using jQuery. There are two approaches to solve this problem that are discussed below:
Approach 1:
- First, select the div element which needs to be copied into another div element.
- Select the target element where the div element is copied.
- Use the append() method to copy the element as its child.
Example: This example uses append() method to copy the div element into another div.
html
<!DOCTYPE HTML>
< html >
< head >
< title >
How to copy the content of a div
into another div using jQuery ?
</ title >
< script src =
</ script >
< style >
.parent {
background: green;
color: white;
width: 400px;
margin: auto;
}
.child {
background: blue;
color: white;
margin: 10px;
}
</ style >
</ head >
< body id = "body" style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
Click on the button to copy
a DIV into another DIV
</ h3 >
< div class = "parent" >
Outer DIV
< div class = "child" >
Inner DIV
</ div >
</ div >
< br >
< div class = "parent" id = "parent2" >
Outer DIV
</ div >
< br >
< button onclick = "GFG_Fun()" >
Click Here
</ button >
< script >
function GFG_Fun() {
let $el = $('.child').clone();
$('#parent2').append($el);
}
</ script >
</ body >
</ html >
|
Output:
Approach 2:
- First, select the div element which need to be copy into another div element.
- Select the target element where div element is copied.
- Use the appendTo() method to copy the element as its child.
Example: This example uses appendTo() method to copy the div element into another div.
html
<!DOCTYPE HTML>
< html >
< head >
< title >
How to copy the content of a div
into another div using jQuery ?
</ title >
< script src =
</ script >
< style >
.parent {
background: green;
color: white;
width: 400px;
margin: auto;
}
.child {
background: blue;
color: white;
margin: 10px;
}
</ style >
</ head >
< body id = "body" style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
Click on the button to copy
a DIV into another DIV
</ h3 >
< div class = "parent" >
Outer DIV
< div class = "child" >
Inner DIV
</ div >
</ div >
< br >
< div class = "parent" id = "parent2" >
Outer DIV
</ div >
< br >
< button onclick = "GFG_Fun()" >
Click Here
</ button >
< script >
function GFG_Fun() {
$('.child').clone().appendTo('#parent2');
}
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...