innerHTML 正在添加 tbody，为什么？

Question

我正在用 Javascript 创建一个表，所以在一个循环中有

if (formFieldData == 'cleanSlate')
{
  document.getElementById('productsTable').innerHTML = '';
  // clears what was there before, so we're left with an empty <table>
} else
{
  document.getElementById('productsTable').innerHTML += '<tr></tr>';
}

经过几次迭代后，我剩下的是这个..不知道如何为你显示 HTML，所以没有尖括号:
tbody tr/tr/tbody tbody tr/tr/tbody

为什么要插入这些 tbody，我该如何阻止它这样做？

Answer 1

这是什么浏览器？

无论如何，您不应该真正使用innerHTML 操作来构建表。这只是一个字符串操作，浏览器不会知道您正在按顺序添加多行。所以它会尝试“清理”你“损坏的”html。

如果不出意外，至少在一个单独的字符串中构建表格行，然后在循环完成后将该变量填充到 innerHTML 中:

var rows;
for(...) {
   if (...) {
      rows += '<tr></tr>\n';
   }
}
document.getElementById('productsTable').innerHTML = rows;

当然，这个确切的代码是行不通的——这只是一个例子。