How to copy the content of a div into another div using jQuery ? - GeeksforGeeks

11 Oct, 2019
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 which are discussed below:
Approach 1:
First, select the div element which need to be copy into another div element.
Select the target element where div eleemtn 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.
<!DOCTYPE HTML>  <html>    <head>      <title>          How to copy the content of a div         into another div using jQuery ?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>          <style>        .parent {            background: green;            color: white;        }        .child {            background: blue;            color: white;            margin: 10px;        }          #GFG_UP {            font-size: 15px;            font-weight: bold;        }        #GFG_DOWN {            font-size: 24px;            font-weight: bold;            color: green;        }    </style></head>    <body id = "body" style = "text-align:center;">            <h1 style = "color:green;" >          GeeksForGeeks      </h1>           <p id = "GFG_UP"></p>          <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>          <p id = "GFG_DOWN"></p>          <script>          var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        up.innerHTML = "Click on the button to "                + "copy a DIV into another DIV.";                   function GFG_Fun() {            var $el = $('.child').clone();            $('#parent2').append($el);            down.innerHTML = "Inner DIV is copied "                    + "to another element.";        }     </script>  </body>    </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
First, select the div element which need to be copy into another div element.
Select the target element where div eleemtn 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.
<!DOCTYPE HTML>  <html>    <head>      <title>          How to copy the content of a div         into another div using jQuery ?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>          <style>        .parent {            background: green;            color: white;        }        .child {            background: blue;            color: white;            margin: 10px;        }          #GFG_UP {            font-size: 15px;            font-weight: bold;        }        #GFG_DOWN {            font-size: 24px;            font-weight: bold;            color: green;        }    </style></head>    <body id = "body" style = "text-align:center;">            <h1 style = "color:green;" >          GeeksForGeeks      </h1>           <p id = "GFG_UP"></p>          <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>          <p id = "GFG_DOWN"></p>          <script>          var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        up.innerHTML = "Click on the button to "                + "copy a DIV into another DIV.";                   function GFG_Fun() {            $('.child').clone().appendTo('#parent2');            down.innerHTML = "Inner DIV is copied"                        + " to another element.";        }     </script>  </body>    </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?