¿Cómo agrego el mismo HTMLDivElement dentro de dos divs? En el ejemplo a continuación, solo el enemyGrid está lleno de divs (o solo userGrid si cambio el orden)
¿Me estoy perdiendo de algo?
const gridRows = 10 const gridCols = 10 const userGrid = document.querySelector('.user-grid') const enemyGrid = document.querySelector('.enemy-grid') generateGrids() function generateGrids() { for (let i = 0; i < gridRows; i++) { for (let j = 0; j < gridCols; j++) { const cell = document.createElement('div') cell.classList.add('cell') cell.dataset.row = i cell.dataset.col = j userGrid.appendChild(cell) enemyGrid.appendChild(cell) } } } .grid-container { display: flex; justify-content: center; min-width: 900px; } .grid { width: 20em; height: 20em; display: flex; flex-wrap: wrap; margin: 4em; box-sizing: content-box; border: 1px solid #b4b4ff; position: relative; } <div class="grid-container"> <div class="grid user-grid"></div> <div class="grid enemy-grid"></div> </div>Llamar a appendChild en un elemento que ya está en el DOM moverá el elemento original a la nueva posición.
En su lugar, clone el elemento y luego agregue:
const gridRows = 10 const gridCols = 10 const userGrid = document.querySelector('.user-grid') const enemyGrid = document.querySelector('.enemy-grid') generateGrids() function generateGrids() { for (let i = 0; i < gridRows; i++) { for (let j = 0; j < gridCols; j++) { const cell = document.createElement('div') cell.classList.add('cell') cell.dataset.row = i cell.dataset.col = j userGrid.appendChild(cell.cloneNode(true)) enemyGrid.appendChild(cell.cloneNode(true)) } } } .grid-container { display: flex; justify-content: center; min-width: 900px; } .grid { width: 20em; height: 20em; display: flex; flex-wrap: wrap; margin: 4em; box-sizing: content-box; border: 1px solid #b4b4ff; position: relative; } <div class="grid-container"> <div class="grid user-grid"></div> <div class="grid enemy-grid"></div> </div>