How to clone the contents of a div into another div with JavaScript?

Question

I want to clone the images of the div leftSide into the div rightSide . On each click on the body the images on the left div should be cloned into the right div. But I can't get the result with the code I'm doing. Is there any mistake in my code? I want to use JavaScript.

Here's my code:

        var theLeftSide = document.getElementById("leftSide");  
        var width = 500; var height = 500;
        top_position = 0; var left_position = 0,
        var numberOfFaces = 5;
        var theRightSide = document.getElementById("rightSide");
        var leftSideImages = theLeftSide.cloneNode(true);
        document.getElementById("rightSide").appendChild(leftSideImages);


            for (var i = 0; i < 5; i++) {
            createElement(i);   
            numberOfFaces += 5;

        function createElement() {
            var image = document.createElement('img');
            image.src = "smile.png";
            image.style.position = 'absolute';
            image.style.top = top_position + "px";
            image.style.left = left_position + "px";
            theLeftSide.appendChild(image);
            top_position = Math.random() *   500 ;
            left_position = Math.random() *  500 ;  

Answer 1

Here is a simple example that clones an HTMLElement in vanilla javascript:

additional information can be found in MDN

 function CloneCtrl() { 'use strict'; var self = this; self.source = document.querySelector('.source'); self.target = document.querySelector('.target'); self.cloneSource = function(event) { var clone = self.source.cloneNode(true); self.target.appendChild(clone); } document .getElementById('cloneBtn') .addEventListener('click', self.cloneSource) ; } document.addEventListener('DOMContentLoaded', CloneCtrl); 

 .source { background: lightseagreen; width: 100px; height: 100px; line-height: 100px; overflow: hidden; margin: 5px; display: inline-block; text-align: center; color: #fff; } .target { border: 1px solid lightcoral; min-height: 110px; } 

 <div><button id="cloneBtn">Clone Source</button></div> <div class="source">SOURCE</div> <hr> <div class="target"></div> 

Answer 2

With jQuery, you can do it kike that:

$('#div2').html($('#div1').html());

which is found from this question: Copy the content of a div into another div .

---

You don't actually provide many details, thus the best I can post, hope it helps!!

Answer 3

you could simply try this if you have second div on page.

 document.getElementById("SecondDv").innerHTML = document.getElementById("FirstDv").innerHTML; 

This will copy whatever is there in FirstDiv to Second. lmk if it works.