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.
//Things I tried
let div =
document.getElementById('testDiv');
html2canvas(div).then(
function(canvas) {
document
.getElementById('#testDivClone')
.appendChild(canvas);
})
/////////////////////////////
$("#testDiv").clone().appendTo("#testDivClone");#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'>
<iframe id='testDivIframe' src="https://www.youtube.com/embed/CqRtQoSqSjk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<canvas id='testDivClone'>
</canvas>