将一个div镜像或克隆到另一个div

Question

我试图将一个div镜像/克隆到另一个div中，但在网上找不到任何解决方案。我所说的克隆是指从一个div到另一个div实时复制所有内容。一个例子是，当你将鼠标悬停在Windows操作系统任务栏上的图标上时，它会向你显示特定GUI上发生的事情。我怎样才能做到这一点？如果没有实时克隆的方法，那么对特定的div进行屏幕截图并将其显示在单独的div上就可以了。需要记住的一件重要事情是，要克隆的div可以包含Images、text、videos、Iframes等元素。非常感谢在这方面的任何帮助或朝着正确的方向推动。提前谢谢。

代码更新：

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>

Answer 1

使用Node接口的cloneNode方法可以实现DOM元素的克隆。

在您的情况下：

<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);

但是，请注意，这不会克隆以前添加到源节点或其任何子节点的任何事件侦听器。此外，克隆节点可能会导致具有相同ID的重复元素。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode了解更多信息。