将表、tr、td 标记附加到 innerHTML 不会创建表行

Appending table, tr, td tags to innerHTML does not create table rows

本文关键字：innerHTML 创建 td tr 将表      更新时间：2023-09-26
var menuStarters = [["chicken", "5.00"], ["salad", "4.11"], ["soup", "3.88"]];
document.getElementById("menu").innerHTML += '<table>';
for (var i = 0; i < menuStarters.length; i++)
{
  document.getElementById("menu").innerHTML += '<tr><td>' + menuStarters[i][0] + '</td><td>' + menuStarters[i][1] + '</td></tr>';
}
document.getElementById("menu").innerHTML += '</table>';
我

敢肯定我可能错过了一些明显的东西。

文档中不能有部分标签。向innerHTML添加开始<table>将导致插入完整(关闭(标记。随后的添加不在表格之外，其中tr和td是非法的。

首先生成字符串，然后将其添加到容器中：

var menuStarters = [
  ["chicken", "5.00"],
  ["salad", "4.11"],
  ["soup", "3.88"]
];
var thtml = '<table>';
for (var i = 0; i < menuStarters.length; i++) {
  thtml += '<tr><td>' + menuStarters[i][0] + '</td><td>' + menuStarters[i][1] + '</td></tr>';
}
thtml += '</table>';
document.getElementById("menu").innerHTML += thtml
<div id="menu"></div>

我在这里创建了一个小提琴

https://jsbin.com/jeguka/edit?html,js,output

var menuStarters = [["chicken", "5.00"], ["salad", "4.11"], ["soup", "3.88"]];
var html = '<table>';
menuStarters.forEach(function(item, index){
html += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
});
html += '</table>';
document.getElementById("menu").innerHTML = html;
相关文章：