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标签？我该如何阻止它这样做？

- JNAScarb

---

我对你的问题是...它是否影响了你的代码？ 如果你也能给我们循环，我认为如果我正确地阅读了你的条件语句，你可能有一个操作顺序问题。 - Eric Hodonsky

据我所知，TBODY是与浏览器相关的问题。我认为我同意Marc B的观点。否则，您将不得不编写所有表格并将其内联（使其成为一行）。 - TheBlackBenzKid

参考上面的评论：https://dev59.com/i2s05IYBdhLWcg3wCNhG - TheBlackBenzKid

Answer 1

这是什么浏览器？

你不应该使用innerHTML操作来构建表格。这只是一个字符串操作，浏览器无法知道您正在按顺序添加多个行。因此，它将尝试“清理”您的“破损”HTML。

如果没有别的办法，至少可以在单独的字符串中构建表格行，然后在循环完成后将该变量插入innerHTML中：

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

当然，这段代码并不能直接使用 - 它只是一个例子。

- Marc B

---

这也有助于减少浏览器锁定，因为您访问DOM的频率较少。 - scrappedcola

我在考虑用'appendChild()'做些什么，但它只能作用于DOM中，而且你必须传递一个DOM元素而不是字符串，这会增加浏览器的工作量。你现在所拥有的可能是最好的解决方案，但是他的操作顺序仍然让我感到困扰。 - Eric Hodonsky

@relic：你可以先构建一个“未连接”的DOM树，然后稍后再将其添加进去。 - Marc B

@MarcB 是的，但这意味着浏览器正在执行工作并访问内存。如果您将字符串附加到DOM，则使浏览器接受和解析新的DOM并将其添加到树中，并一次性完成所有工作，占用更少的内存。如果您可以避免将DOM元素构建为变量（除非用于存储和访问），则应始终尝试仅附加字符串。 - Eric Hodonsky

实际上，未连接的分支与渲染无关。它是DOM操作，但因为该分支不是屏幕文档的一部分，所以没有渲染开销，因此您可以随意处理该分支。 - Marc B

好的，我明白了。顺便说一下，我使用的是Linux中的Firefox 7.0.1。按照我的方式，它是一个添加产品线的对象，因此如果我想要构建整个表格，我将不得不传递变量，这很好，我只是认为DOM的整个重点是能够随时进行调整。我对此还很陌生，所以谢谢大家的评论。 - JNAScarb