javascript - 无法向表中添加新行

Question

function load(){
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
    var tablebody = document.getElementById("classestable");
    tablebody.innerHTML += "<tbody></tbody>";
    tablebody.getElementsByTagName("tbody").innerHTML = "";
    for(var i=0;i<15;i++){
        tablebody.getElementsByTagName("tbody").innerHTML += row;
    }
}

除了 row 的内容没有添加到 tbody 之外，上面的代码运行良好。

console.log 显示 row 的内容是有效的 html，并且控制台中没有错误。为什么没有添加？

Answer 1

getElementsByTagName 返回一个 NodeList，您可以使用节点的索引在第一个节点访问它

我会把代码改成下面这样

var innerRow = "";

for(var i=0;i<15;i++){
    innerRow += row;
}

tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow

这样你只扫描 DOM 一次而不是 15 次