在javascript中添加带有for循环的HTML矩形

我想在HTML页面上画一个2 x 2的蓝色矩形网格，但我的代码没有画任何东西。我创建了一个我以后要添加的片段toAdd，并向toAdd添加div。我不太确定哪里出错了，当我尝试添加console.log时，我可以确认正在调用addSquares。我是否需要向HTML文件添加任何内容，或者此代码中是否存在错误

我还注意到这段代码产生了五个div:b0，b1，b2，b3，b1返回错误，我不确定for循环有什么问题

dim = 2;
width = 50;
height = 50;

// add the squares 
function addSquares()
{
  var toAdd = document.createDocumentFragment();
  for(var i = 0; i < dim; i++)
  {
    for(var j = 0; j < dim; j++)
    {
      var label = j + i * dim; 
      var name = "b" + label;
      console.log(name)
      var div = document.createElement(name);
      div.style.width = width + "px";
      div.style.height = height + "px";
      div.style.left = width * j + "px";
      div.style.top = height * i + "px";
      div.style.position = "absolute";
      div.style.color = "blue";
      toAdd.appendChild(div);
    }
  }
  document.appendChild(toAdd);
}

---

看来有两个问题。首先，您需要更改：

document.appendChild(toAdd);

到

第二个问题是您使用了错误的CSS样式声明。您的div位于DOM中，但没有为其指定背景色，这反过来会产生一种错觉，即它们不在DOM中。所以用背景色代替颜色

dim=2； 宽度=50； 高度=50； //加上方块 函数平方 { var toAdd=document.createDocumentFragment； forvar i=0；iaddSquares 我只是想告诉你一个小把戏

你有这个：

div.style.width = width + "px";
div.style.height = height + "px";
div.style.left = width * j + "px";
div.style.top = height * i + "px";
div.style.position = "absolute";
div.style.backgroundColor = "blue";

我相信可以这样写ES6：

div.style.cssText =  `width: ${width + "px"}; 
                      height: ${height + "px"}; 
                      left: ${width * j + "px"}; 
                      top: ${height * i + "px"}; 
                      position: absolute; 
                      backgroundColor: blue;`

据我所知.cssText=将替换现有的内联

要附加现有内联，请使用.cssText+=

---

我相信从长远来看，这会对您有所帮助。

我尝试了这个方法，但矩形仍然没有显示我的答案。看一看，让我知道，如果这解决了你的问题。是的，这工作！！非常感谢。快速提问-如果我想将这些矩形附加到一个容器中，并且我想在矩形上调用一些东西，我正在编写一个函数，为每个矩形添加一个事件侦听器，我能按名称调用它们吗？很高兴听到！别忘了把这个答案标为正确。你介意回答最后一个问题吗？如果我想将这些矩形附加到一个容器中，并且我想在矩形上调用一些东西，我正在编写一个函数，在每个矩形中添加一个事件侦听器，我能按名称调用它们吗？

div.style.cssText =  `width: ${width + "px"}; 
                      height: ${height + "px"}; 
                      left: ${width * j + "px"}; 
                      top: ${height * i + "px"}; 
                      position: absolute; 
                      backgroundColor: blue;`