javascript - 如何在我的内联 block javascript div 之间添加换行符？

Question

我的目标是使用 html/javascript 在一个大的可变网格中显示图 block 。我已经设法用下面的代码用内联 block 显示 div，但我似乎无法换行。例如，在每 10 个图 block 之后，我想要一个新行开始。这将创建一个 10 x 10 的网格。

function cdiv() {
  var div = document.createElement("div");
  div.style.width = "100px";
  div.style.height = "100px";
  div.style.background = "red";
  div.style.color = "white";
  div.style.display = "inline-block"
  div.innerHTML = 'hello';

  document.body.appendChild(div);
}

for (i = 0; i < 10; i++) {

  for (b = 0; b < 10; b++) { 
    cdiv();
  }
}

关于如何为每个 div 提供唯一 ID 以便进一步修补，我将不胜感激。

Answer 1

在内循环之后，追加一个断行“br”

for (i = 0; i < 10; i++) {
  for (b = 0; b < 10; b++) { 
    cdiv();
  }
  //Append line break here...      
  document.body.appendChild(document.createElement("br")); //Thanks Squint hint as well
}