如何在div容器内创建子div？生成后页面不显示如何解决

核心原因 #

你创建的容器元素仅存在于JavaScript运行内存中，未插入到页面的实际DOM树内，浏览器不会渲染脱离文档流的内存元素。

其他可能的原因 #

• 定义的generateDivs函数未被主动调用，生成逻辑根本没有执行
• 容器.dots-container被设置了display: none、visibility: hidden、opacity: 0、定位超出视口、z-index低于其他遮挡元素等样式
• 子div背景色设置为白色，和页面背景色完全重合，即使渲染也肉眼不可见
• 子div默认是块级元素，每个单独占一行，4160个元素总高度过高，滚动到视口外未被观察到

修复方案 #

在函数末尾增加容器挂载到DOM树的逻辑，同时可优化布局和性能：

function generateDivs() {
    var dotsNumbers = 4160;
    // 用文档碎片减少重排，优化性能
    const fragment = document.createDocumentFragment();
    const containerDiv = document.createElement("div");
    containerDiv.classList.add("dots-container");
    // 给容器加基础布局样式，避免子元素全部换行
    containerDiv.style.display = "flex";
    containerDiv.style.flexWrap = "wrap";
    containerDiv.style.width = "520px"; // 每行52个，刚好80行排完4160个

    for (var i = 0; i < dotsNumbers; i++) {
        const div = document.createElement('div');
        div.id = 'block' + i;
        // 避免白底和页面重合，可修改背景色
        div.style.backgroundColor = '#eee';
        div.style.border = '1px solid black';
        div.style.width = '10px';
        div.style.height = '10px';
        div.className = 'block' + i;
        div.textContent = ".";
        fragment.appendChild(div);
    }
    containerDiv.appendChild(fragment);
    // 核心：将容器挂载到页面body，也可替换为你页面中已存在的其他DOM节点
    document.body.appendChild(containerDiv);
}
// 主动调用函数
generateDivs();

内容的提问来源于stack exchange，提问作者r10d