如何在内联块javascript div之间添加换行符？

我的目标是使用html/javascript在一个大的可变网格中显示分幅。我已经用下面的代码用内联块显示了div，但我似乎没有换行符。例如，在每10个瓷砖之后，我希望开始一条新的线。这将创建一个10乘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();
  }
}

函数cdiv（）{
var div=document.createElement（“div”）；
div.style.width=“100px”；
div.style.height=“100px”；
div.style.background=“红色”；
div.style.color=“白色”；
div.style.display=“内联块”
div.innerHTML='hello'；
文件.正文.附件（div）；
}
对于（i=0；i<10；i++）{
对于（b=0；b<10；b++）{
cdiv（）；
}
}

如果能给我一个额外的提示，告诉我如何给每个div一个唯一的ID，以便进一步修改，我将不胜感激。

函数cdiv（）{
var div=document.createElement（“div”）；
div.style.width=“100px”；
div.style.height=“100px”；
div.style.background=“红色”；
div.style.color=“白色”；
div.style.display=“内联块”
div.innerHTML='hello'；
文件.正文.附件（div）；
}
对于（i=0；i<10；i++）{
document.body.appendChild（document.createElement（“br”））；
对于（b=0；b<10；b++）{
cdiv（）；
}
}

在内部循环之后，附加一个换行符“br”

（i=0；i<10；i++）的

{
对于（b=0；b<10；b++）{
cdiv（）；
}
//在这里附加换行符。。。
document.body.appendChild（document.createElement（“br”）；//也谢谢斜视提示
}

一种方法是将所有div包装在一个容器中，每个div的宽度是每个div的10倍。请参考下面的代码和此提琴

功能cdiv（ele）{
var div=document.createElement（“div”）；
div.style.width=“100px”；
div.style.height=“100px”；
div.style.background=“红色”；
div.style.color=“白色”；
div.style.display=“内联块”
div.innerHTML='hello'；
附属儿童（分部）等；
}
var div=document.createElement（“div”）；
div.style.width=“1000px”///10倍内底
div.style[“overflow-y”]=“可见”//显示溢出
文件.正文.附件（div）；
对于（i=0；i<10；i++）{
对于（b=0；b<10；b++）{
cdiv（div）；
}
}

document.body.appendChild（document.createElement（“br”））

？我现在的代码和你的完全一样，但对我不起作用。不过你的很完美。这可以单独使用css来实现，更进一步地说，charlieftl的评论显示了一种css方法：我尝试了@squint上面所建议的方法，但没有成功。他的方法是在内部循环完成后添加分隔线。在JFIDLE上，我看到平铺水平延伸过页面视图，这就是我想要的。然而，当我在索引文件中尝试大量的平铺并在chrome中打开它时，我没有看到滚动。相反，我看到的是一行行行的平铺，它们水平地适合我的页面，并且不会越过页面。我希望有一个完美的正方形网格。您是否尝试过将div或body容器的overflow设置为visible？对不起，我不知道怎么做，但现在正在搜索。如果你有一个很好的链接，我会很感激它更新了我的答案，包括它。您可以执行div.style[“overflow-y”]=“visible”；最好是设置溢出的机构，若上述事情不起作用。将此添加到css正文{overflow:visible；}

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
}

function cdiv(ele) {
  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';

 ele.appendChild(div);
}

var div = document.createElement("div");
div.style.width = "1000px"; ///10 times of inner divs
div.style["overflow-y"]= "visible"; // to show overflow
document.body.appendChild(div);
for (i = 0; i < 10; i++) {
  for (b = 0; b < 10; b++) { 
    cdiv(div);
  }
}