innerHTML 正在添加 tbody，为什么？答案

【问题标题】：innerHTML is adding tbody, why?innerHTML 正在添加 tbody，为什么？
【发布时间】：2012-01-26 17:01:46
【问题描述】：

我正在用 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，我该如何阻止它这样做？

【问题讨论】：

我的问题是......它会伤害你的代码吗？而且您还给了我们循环，如果我正在阅读您的条件权利，我认为您有操作顺序问题。
据我所知，TBODY 是与浏览器相关的问题。我想我同意上面的 Marc B。否则，您将不得不编写所有表格并将其内联（使其全部成为一行）
参考上述评论：stackoverflow.com/questions/7490364/…

标签： innerhtml

【解决方案1】：

这是什么浏览器？

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

如果没有别的，至少在一个单独的字符串中构建表格行，然后在循环完成后将该变量填充到 innerHTML 中：

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

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

【讨论】：

这也将有助于减少浏览器锁定，因为您访问 dom 的频率较低。
我在想 'appendChild()' 的东西，但这确实适用于 DOM，你必须传入一个 DOM 元素而不是字符串，这在浏览器上工作更多。你在这里得到的可能是最好的解决方案，但我仍然对他的操作顺序感到困扰。
@relic：您可以将 dom 树构建为“未加入”的分支并稍后添加。
@MarcB 是的，但这意味着浏览器正在工作并访问内存。如果将字符串附加到 DOM，它会使浏览器接受并解析新的 DOM，并将其添加到 Tree 中，并立即完成所有工作，并且占用更少的内存。如果您可以避免将 DOM 元素构建到变量中（除非用于存储和访问），那么您应该尝试始终只附加一个字符串。
实际上，未加入的分支不涉及渲染。它是 dom 操作，但由于该分支不是屏幕文档的一部分，因此没有渲染开销，因此您可以随意使用该分支。