How do I append same HTMLDivElement inside two divs? In the example below only the enemyGrid is filled with divs (or only userGrid if I change the order)
Am I missing something?
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>Calling appendChild on an element which is already in the DOM will move the original element to the new position.
Instead, clone the element, then append:
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>