How to create divs inside a div?-CodePudding

I need to generate 4160 divs inside a container div, but nothing is showing on the page but when I console.log(containerDiv), I see the html element with every divs in it. Any ideas why it does not show on the 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]);
        
    }
}

CodePudding user response：

The console can happily display elements that don't have a parent node in the document yet, and you aren't adding the containerDiv to the document itself so it would be displayed in the browser frame proper.

Just add (e.g. – if you need to add the newly created container elsewhere, adapt accordingly)

document.body.appendChild(containerDiv);

at the end.