Estoy tratando de crear una cuadrícula de 16 por 16 usando la manipulación DOM y los divs creados dinámicamente no aparecen. Intenté asignar un color de fondo pero no funcionó.
const container = document.querySelector('.container'); let k = 1; for (let i = 0; i < 16; i++) { for (let j = 0; j < 16; j++) { let newDiv = document.createElement('div'); newDiv.style.display = 'flex'; newDiv.style.backgroundColor = 'red'; newDiv.id = k++; container.appendChild(newDiv); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Etch-a-Sketch</title> </head> <body> <div class="container"></div> <!--<script src="script.js"></script>--> </body> </html>Es porque los divs están agregando pero están vacíos, agregue algo al div para verlos aparecer...
const container = document.querySelector('.container'); let k = 1; for (let i = 0; i < 16; i++) { for (let j = 0; j < 16; j++) { let newDiv = document.createElement('div'); newDiv.style.display = 'flex'; newDiv.style.backgroundColor = 'red'; newDiv.id = k++; newDiv.textContent = "x"; container.appendChild(newDiv); } } <div class="container"></div>O también puedes agregar altura para verlos aparecer...
const container = document.querySelector('.container'); let k = 1; for (let i = 0; i < 16; i++) { for (let j = 0; j < 16; j++) { let newDiv = document.createElement('div'); newDiv.style.display = 'flex'; newDiv.style.backgroundColor = 'red'; newDiv.id = k++; newDiv.style.height = "5px"; container.appendChild(newDiv); } } <div class="container"></div>