Estaba tratando de duplicar/clonar un div en otro div, pero no pude encontrar ninguna solución para esto en línea. Lo que quiero decir con clonar es replicar todo en vivo de un div a otro. Un ejemplo de esto es cuando pasa el cursor sobre los iconos en su barra de tareas en el sistema operativo Windows, le muestra lo que está sucediendo en esa GUI específica. ¿Cómo puedo conseguir esto? Si no hay formas de clonación en vivo, tomar una captura de pantalla de ese div específico y mostrarlo en un div separado estaría bien. Una cosa importante a tener en cuenta es que el div que se va a clonar podría contener elementos como imágenes, texto, videos, iframes, etc. Cualquier ayuda en esto o un empujón en la dirección correcta es muy apreciada. Gracias por adelantado.
Código actualizado:
function testFun() { let source = document.querySelector('#testDiv'); let dest = document.querySelector('#testDivClone'); let clone = source.cloneNode(true); // true -> deep cloning, ie 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>La clonación de un elemento DOM se puede lograr utilizando el método cloneNode de la interfaz Node .
En tu caso:
<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, ie the whole subtree dest.appendChild(clone);Sin embargo, tenga en cuenta que esto no clonará ningún detector de eventos agregado previamente al nodo de origen ni a ninguno de sus elementos secundarios. Además, la clonación de nodos puede dar lugar a elementos duplicados con el mismo ID.
Consultehttps://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode para obtener más información.