Mirroring or clonning a div to another div

Question

I was trying to mirror/clone a div into another div but I couldn't find any solutions to this online. What I mean by clone is replicate everything live from one div to another. An example of this is when you hover on icons in your taskbar on Windows OS it shows you what is happening on that specific GUI. How can I achieve this? If there are no ways of live cloning , screenshotting that specific div and showing it on a separate div would be fine. One important thing to keep in mind is that the div to be cloned could contain elements like Images, text, videos, Iframes, etc... Any help on this or a nudge in the right direction is much appreciated. Thanks in advance.

Code Updated:

function testFun() {
  let source = document.querySelector('#testDiv');
  let dest = document.querySelector('#testDivClone');
  let clone = source.cloneNode(true); // true -> deep cloning, i.e. the whole subtree
  dest.appendChild(clone);
}

#testDiv {
  position: absolute;
  top: 10%;
  width: 30%;
  height: 60%;
  background-color: green;
}

#testDiv iframe {
  width: 100%;
  height: 100%;
}

#testDivClone {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 30%;
  height: 60%;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js" integrity="sha512-UcDEnmFoMh0dYHu0wGsf5SKB7z7i5j3GuXHCnb3i4s44hfctoLihr896bxM0zL7jGkcHQXXrJsFIL62ehtd6yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id='testDiv'>
  <p>
    Clone This
  </p>
</div>

<canvas id='testDivClone'>

</canvas>

<button onclick="testFun()">
  click
</button>

Does this answer your question? [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) — Sync it, Jan 11 '22 at 06:55
@Syncit no those are two different things I'm not trying to clone an object I'm trying to clone an element. Really different! — seriously, Jan 11 '22 at 06:59

stefan · Accepted Answer · 2022-01-11T10:58:06.747

1

Cloning a DOM element can be achived by using the cloneNode method of the Node interface.

In your case:

<div id="testDiv">
  <!-- ... -->
</div>

<div id="testDivClone">  <!-- Not a canvas element anymore -->

</div>

let source = document.querySelector('#testDiv');
let dest = document.querySelector('#testDivClone');
let clone = source.cloneNode(true); // true -> deep cloning, i.e. the whole subtree
dest.appendChild(clone);

However, be aware that this will not clone any event listeners previously added to the source node or any of its children. Additionally, cloning nodes may lead to duplicate elements with the same ID.

See https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode for more information.

edited Jan 11 '22 at 10:58

answered Jan 11 '22 at 07:26

stefan

181
8

2 questions. First "cloning nodes may lead to duplicate elements with the same ID.'' Can this be fixed if I use classes instead? Second "this will not clone any event listeners" is there any workaround for this? – seriously Jan 11 '22 at 08:00
1

ad 1) You could use `class` attributes instead of element IDs. Of course, you have to adjust your `querySelectors`. ad 2) Not in an easy way, but see https://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners for some ideas – stefan Jan 11 '22 at 08:14

Mirroring or clonning a div to another div

1 Answers1