How to copy the content of a div into another div using jquery?

In this post, we will show you how to copy the content of a div into another div using jQuery.

1. Code:

<!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;
        } 
        #soltuts_up {
            font-size: 15px;
            font-weight: bold;
        }
        #soltuts_down {
            font-size: 24px;
            font-weight: bold;
            color: green;
        }
    </style>
</head> 
 
<body id = "body" style = "text-align:center;"> 
     
    <h1 style = "color:green;" > 
        Soltuts.com
    </h1>
     
    <p id = "soltuts_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 = "soltuts_copy()">
        click here
    </button>
     
    <p id = "soltuts_down"></p>
     
    <script> 
        var up = document.getElementById('soltuts_up');
        var down = document.getElementById('soltuts_down');
        up.innerHTML = "Click on the button to "
                + "copy a DIV into another DIV.";
         
        function soltuts_copy() {
            $('.child').clone().appendTo('#parent2');
            down.innerHTML = "Inner DIV is copied"
                        + " to another element.";
        }
    </script> 
</body> 
 
</html>

2. Example:

Run program to get the result.

CSS JavaScript