如何在 div 中创建 div？答案

【问题标题】：How to create divs inside a div?如何在 div 中创建 div？
【发布时间】：2021-12-06 01:50:52
【问题描述】：

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

【问题讨论】：

标签： javascript html dom appendchild

【解决方案1】：

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

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

document.body.appendChild(containerDiv);

在最后。

【讨论】：