Question

Javascript .createElement 和 .appendChild 问题（包括 for 和 if）

2022-06-27

94

javascript createelement

我是一个新手 javascript 用户。我需要一些帮助来调试此代码。我打算根据列表中的值数量创建一个 3 列宽的表格来显示每个值。顺便说一下，整个 html 格式都是用网格设置的。

错误是：未捕获的 TypeError：无法读取未定义的属性（读取“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 调用内使用 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);
        }
    }

Answer 2

尝试

newRowItem.appendChild(newColItem)

而不是

idName.appendChild(newColItem)

horvoje

2022-06-27

Answer 3

使用带索引的 for 循环对列表索引进行模运算。

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