在html表中发布JavaScript数组

我习惯于通过php实现这一点，但现在转向js（新手），我不明白为什么它不起作用！ 另外，请写下除文件之外的任何建议？因为我不想删除以后生成的html。 我只想将js数组值发布到html表中。 当我写的时候：

document.getElementById（“demo”）.innerHTML+=''+item+''它可以工作，但每次都会创建错误的表



表，td{
边框：1px纯黑；
}
文件。填写（“”）；
arrayjs.forEach（myFunction）；
文件。填写（“”）；
功能myFunction（项目）{
document.getElementById（“demo”）.innerHTML+=''+item+''；
}
您认为应该避免使用
文档。编写
是正确的，因为这通常被认为是不好的做法，应该尽可能避免。更好的方法是使用本机方法创建元素并将它们添加到DOM中，例如
createElement（）
和
appendChild（）

您可以使用此方法在其中创建
表
和
tbody
。在那里，
tbody
有一些方法可以让您创建行，并在行中创建单元格

下面是一个如何做到这一点的例子


让arrayjs=['foo'，'bar'，'fizz'，'buzz']；
让container=document.querySelector（“#demo”）；
tableFromArray（arrayjs，容器）；
函数表FromArray（arr，容器）{
让table=document.createElement（'table'）；
让tbody=document.createElement（'tbody'）；
container.appendChild（表）；
表2.附件子项（t正文）
arr.forEach（项目=>{
让tr=tbody.insertRow（tbody.rows.length）；//添加新行
让td=tr.insertCell（tr.cells.length）；//在行中添加一个新单元格
td.textContent=项目；
});
}
表格，
运输署{
边框：1px纯黑；
}
使用
document.createElement
而不是
document.write创建元素

tab = document.createElement("table")

然后，使用相同的函数创建表元素，并使用
textContent
添加内容。最后，使用
appendChild

arrayjs.forEach(item => {
  row = document.createElement('tr')
  tableItem = document.createElement('td')
  tableItem.textContent = item;
  row.appendChild(tableItem)
  tab.appendChild(row);
})

这同样有效：）

正如Rory和wwilkowski所说，创建元素是最好的做法，但我尝试了这一做法，而且效果也很好（因此我将发布给任何想要更简单解决方案的人，尽管我不明白为什么要使用空字符串）：



桌子{
边界塌陷：塌陷；
}
td，th{
边框：1px实心#999；
填充：0.5雷姆；
文本对齐：左对齐；
}
var outputHTML=“”；
动物变量=[“猫”、“狗”、“鸟”、“山羊”]；
//循环数组并创建html字符串
outputHTML=“”；
对于（var i=0；iYou没有将表行放在表的内部。您不应该使用
文档。写
对于这一点，请参见以下答案：@WillTaylor表行是根据foreach循环创建的，我认为表不在循环外部，但我不知道为什么感谢您，这是可行的，但我试图避免使用“单元格”另外，因为它们的双边框线看起来很难看，特别是我在一些td元素中插入了一些图像：（如果你正在构建一个表，你没有选择，你必须使用
td
单元格。也就是说，它们可以很容易地使用CSSoh设置样式，甚至可以完全删除。是的！我发布了一个新的答案，其中有另一个解决方案有效，但我仍然认为你的解决方案是最好的方法：）谢谢您的回答，是的，我认为创建元素更好（只是这对我不起作用，但您的方式是正确的）