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

Question

我试图将一个 div 镜像/克隆到另一个 div，但我在网上找不到任何解决方案。我所说的克隆是指将所有内容从一个 div 复制到另一个。例如，当您将鼠标悬停在 Windows 操作系统任务栏中的图标上时，它会向您显示该特定 GUI 上发生的情况。我怎样才能做到这一点？如果没有实时克隆的方法，则截取该特定 div 并将其显示在单独的 div 上就可以了。要记住的一件重要事情是，要克隆的 div 可以包含图像、文本、视频、Iframe 等元素......对此的任何帮助或在正确方向上的推动都非常感谢。提前致谢。

代码更新：

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。