如何在 div 中创建 div？

Question

我需要在容器 div 中生成 4160 divs，但是页面上没有显示任何内容，但是当我 console.log(containerDiv) 时，我看到了 html 元素每个 div 都在里面。知道为什么它没有显示在 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]);
        
    }
}

Answer 1

控制台可以愉快地显示文档中还没有父节点的元素，并且您没有将 containerDiv 添加到文档本身，因此它会正确显示在浏览器框架中.

只需添加（例如 – 如果您需要在其他地方添加新创建的容器，相应地进行调整）

document.body.appendChild(containerDiv);

最后。

如何在 div 中创建 div？

How to create divs inside a div?

html

javascript

dom

appendchild