Javascript .createElement 和 .appendChild 问题(包括 for 和 if)

Question

我是一个非常新手的 javascript 用户。我需要一些帮助来调试这段代码。我打算这样做是基于列表中的值的数量，创建一个 3 列宽的表来显示每个值。顺便说一句，整个 html 格式是用网格设置的。

错误是: 未捕获的类型错误:无法读取未定义的属性(读取“appendChild”)

HTML(内部正文):

<section id="db_gallery">
      <table id="gallery_table"></table>
      <script src="autogallery.js"></script>
</section>

autogallery.js 中的 JS:

const gallery_table = document.getElementById("gallery_table");
const list = ["A", "B", "C", "D", "E", "F"];

for (let i of list) {
    if (i % 3 === 0) {
        let newRowItem = document.createElement("tr");
        var idName = "newRowItem";
        idName.concat(i);
        newRowItem.setAttribute("id", idName);
        gallery_table.appendChild(newRowItem);
    }

    let newColItem = document.createElement('th');
    newColItem.textContent = i;

    idName.appendChild(newColItem);
    console.log(idName);
}

此外，如果任何建议都易于理解，那将是一个很大的帮助。如果这意味着什么，我最终会将其链接到 phpmyadmin 数据库作为数组中的值。 谢谢!

Answer 1

首先，您应该使用 newRowItem.appendChild 而不是 idName，因为 newRowItem 是您创建的元素。

其次，当使用 for...of i 是元素而不是索引，所以在你的情况下最好使用 for .

最后，你不应该在范围之外使用 newRowItem，因为你在 if caluse 中用 let 声明了它。

这应该是正确的:

const gallery_table = document.getElementById("gallery_table");
let list = ["A", "B", "C", "D", "E", "F"];
var idName = "";

    for (let i = 0; i < list.length; i++) {
        if (i % 3 === 0) {
            let newRowItem = document.createElement("tr");
            idName = "newRowItem";
            idName = idName.concat(list[i]);
            newRowItem.setAttribute("id", idName);
            gallery_table.appendChild(newRowItem);
            let newColItem = document.createElement('th');
            newColItem.textContent = list[i];
            newRowItem.appendChild(newColItem);
        }
    }