Necesito generar 4160 divs dentro de un contenedor div, pero no se muestra nada en la página, pero cuando hago console.log(containerDiv) , veo el elemento html con todos los divs. ¿Alguna idea de por qué no se muestra en el html?
function generateDivs() { var dotsNumbers = 4160; var arrayDiv = new Array(); const containerDiv = document.createElement("div"); containerDiv.classList.add("dots-container"); console.log(containerDiv) for (var i = 0; i < dotsNumbers; i++) { arrayDiv[i] = document.createElement('div'); arrayDiv[i].id = 'block' + i; arrayDiv[i].style.backgroundColor = 'white'; arrayDiv[i].style.border = '1px solid black'; arrayDiv[i].style.width = '10px'; arrayDiv[i].style.height = '10px'; arrayDiv[i].className = 'block' + i; arrayDiv[i].textContent = "."; containerDiv.appendChild(arrayDiv[i]); } }La consola puede mostrar felizmente elementos que aún no tienen un nodo principal en el documento, y no está agregando containerDiv al documento en sí, por lo que se mostraría en el marco del navegador propiamente dicho.
Simplemente agregue (por ejemplo, si necesita agregar el contenedor recién creado en otro lugar, adáptelo en consecuencia)
document.body.appendChild(containerDiv);al final.