如何让我的 div 在动态创建时显示出来？答案

【问题标题】：How do I make my divs show up when created dynamically?如何让我的 div 在动态创建时显示出来？
【发布时间】：2022-01-14 03:29:13
【问题描述】：

我正在尝试使用 DOM 操作创建一个 16 x 16 的网格，但动态创建的 div 没有显示出来。我尝试分配背景颜色，但没有成功。

const container = document.querySelector('.container');
let k = 1;
for (let i = 0; i < 16; i++) {
  for (let j = 0; j < 16; j++) {
    let newDiv = document.createElement('div');
    newDiv.style.display = 'flex';
    newDiv.style.backgroundColor = 'red';
    newDiv.id = k++;
    container.appendChild(newDiv);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch-a-Sketch</title>
</head>
<body>
  <div class="container"></div>
  <!--<script src="script.js"></script>-->
</body>
</html>

【问题讨论】：

container 是我拥有的 div 类的名称。已编辑
也将一些height 添加到您的 div 中。没有内容，div 的高度将保持为 0，使其不可见。
这能回答你的问题吗？ Trying to create 16x16 grid with flexbox but for some reason width: 100% won't work
将此问题标记为重复stackoverflow.com/a/69943664/17911862

标签： javascript html css dom

【解决方案1】：

这是因为 div 正在添加但它们是空的，在 div 中添加一些内容以查看它们出现...

const container = document.querySelector('.container');
let k = 1;
for (let i = 0; i < 16; i++) {
  for (let j = 0; j < 16; j++) {
    let newDiv = document.createElement('div');
    newDiv.style.display = 'flex';
    newDiv.style.backgroundColor = 'red';
    newDiv.id = k++;
    newDiv.textContent = "x";
    container.appendChild(newDiv);
  }
}

&lt;div class="container"&gt;&lt;/div&gt;

或者您也可以添加高度以查看它们的显示...

const container = document.querySelector('.container');
let k = 1;
for (let i = 0; i < 16; i++) {
  for (let j = 0; j < 16; j++) {
    let newDiv = document.createElement('div');
    newDiv.style.display = 'flex';
    newDiv.style.backgroundColor = 'red';
    newDiv.id = k++;
    newDiv.style.height = "5px";
    container.appendChild(newDiv);
  }
}

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：