使用Javascript创建动态网格

我对JS很陌生，所以请原谅任何可能完全错误的事情

我正在尝试动态创建一个16x16的div网格。我的逻辑是，我将为所有网格创建一个容器，在容器内我将附加16行，在每行中我将附加16个框。我大致了解了我的代码，我想检查它是否是有效的逻辑和JS

/* Creating the grid */
function grid() {
    var container = document.createElement("div");
    container.id = "main";
    container.className = "container";

    for (i=0, i<16, i+=1) {
        var row = document.getElementbyId('main').appendChild('div');
        row.className = "row";
        row.id = "row" + i;
    };

    for (j=0, j<16, j+=1) {
        for (k=0, k<16, k+=1) {
            var box = document.getElementbyId("row" + j).appendChild('div');
            box.className = "box";
        };
    };
};

/*创建网格*/
功能网格（）{
var container=document.createElement（“div”）；
container.id=“main”；
container.className=“container”；
对于（i=0，iYep），尽管存在许多语法/类型错误，但逻辑是正确的，并且存储可重用变量和只有2个循环会更有效，如下所示

function grid(d) {
 var container = d.createElement("div");
 container.id = "main";
 container.className = "container";

  for (i=0; i<16; i++) {
    var row = container.appendChild(d.createElement('div'));
    row.className = "row";
    row.id = "row" + i;

     for (k=0; k<16; k++) {
        var box = row.appendChild(d.createElement('div'));
        box.className = "box";
     };
  };

  d.body.appendChild(container);

};

grid(document);

功能网格（d）{
var container=d.createElement（“div”）；
container.id=“main”；
container.className=“container”；
对于（i=0；i
原因

代码有一些问题


for
循环的语法是
for（init；condition；final expression）
，有关详细信息，请参阅手册
appendChild
需要节点而不是字符串
函数
grid（）
没有任何作用。它应该返回一个节点，接受一个要附加到的节点，或者在某处插入内容，这由您决定

演示

有关更正的代码和演示，请参见下面的演示


/*创建网格*/
功能网格（el）{
var container=document.createElement（“div”）；
container.id=“main”；
container.className=“container”；
对于（i=0；i
/*创建网格*/
功能网格（内容）{
var container=content.appendChild（document.createElement（“div”））；
container.id=“main”；
container.className=“container”；
对于（变量i=0；i<16；++i）{
var row=container.appendChild（document.createElement（“div”））；
row.className=“row”；
row.id=“row”+i；
对于（变量k=0；k<16；++k）{
var-box=row.appendChild（document.createElement（“div”））；
box.className=“box”；
}
}
}
grid（document.body）
您应该注意在for循环中滥用语法

您可能需要：

'use strict';

function grid() {
    var container = document.createElement('div');
    container.id = "main";
    container.className = "container";

    for (var i = 0; i < 16; i++) {

        var row = document.createElement('div');
        row.className = "row";
        row.id = "row" + i;

        for (var j = 0; j < 16; j++) {
            var box = document.createElement('div');
            box.className = 'box';
            row.appendChild(box);
        }

        container.appendChild(row);
    }

    return container;
}

console.log(grid());

// and you should use 
// document.getElementById('xxx').appendChild(grid());

“严格使用”；
功能网格（）{
var container=document.createElement（'div'）；
container.id=“main”；
container.className=“container”；
对于（变量i=0；i<16；i++）{
var行=document.createElement（'div'）；
row.className=“row”；
row.id=“row”+i；
对于（var j=0；j<16；j++）{
var-box=document.createElement（'div'）；
box.className='box'；
行。追加子项（框）；
}
container.appendChild（行）；
}
返回容器；
}
log（grid（））；
//你应该使用
//document.getElementById（'xxx'）.appendChild（grid（））；

你可以参考：





，这表示可以将所有子节点附加到父节点，然后将父节点附加到其父节点
您有很多语法错误需要注意，例如：

for循环应该包含分号而不是逗号

每次追加div之前都需要创建div，就像对容器所做的那样

下面是一个工作代码：

function grid(){
    var container = document.createElement("div");
    container.id = "main";
    container.className = "container";
    document.body.appendChild(container);
    var main = document.getElementById('main');
    for (var i=0; i<16; i++) {
        var row = document.createElement("div");
        row.className = "row";
        row.id = "row" + i;
        main.appendChild(row);
        var roww = document.getElementById('row'+i);
        for (var j=0; j<16; j++) {
            var box = document.createElement("div");
            box.className = "box";
            roww.appendChild(box);
        }
    }
}
window.onload = grid();

功能网格（）{
var container=document.createElement（“div”）；
container.id=“main”；
container.className=“container”；
文件.正文.附件（容器）；
var main=document.getElementById（'main'）；
对于（var i=0；iIt不是。
.appendChild
接受节点，而不是字符串。您应该将
appendChild（'div'）
更改为
appendChild（document.createElement（“div”））
哦，是的，我忘记了这一点。您必须在追加元素之前创建它。