Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

90
Views
How to create divs inside a div?

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]);
        
    }
}
7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs