Javascript 自动关闭 HTML 个标签？

Question

为什么这两个函数给出不同的结果？

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var register = [
  {att1: 1, att2: 2, att3: 3},
  {att1: 4, att2: 5, att3: 6},
  {att1: 7, att2: 8, att3: 9}
];

//table1.innerHTML = "";
//table2.innerHTML = "";

function drawTable1() {
  for (var i = 0; i < register.length; i++) {
    table1.innerHTML += "<tr><td>" + register[i].att1 + "</td><td>" + register[i].att2 + "</td><td>" + register[i].att3 + "</td></tr>";
  }
}

function drawTable2() {
 for (var i = 0; i < register.length; i++) {
   table2.innerHTML += "<tr>";
    table2.innerHTML += "<td>" + register[i].att1 + "</td>";
    table2.innerHTML += "<td>" + register[i].att2 + "</td>";
    table2.innerHTML += "<td>" + register[i].att3 + "</td>";
    table2.innerHTML += "</tr>";
  }
}

drawTable1();
drawTable2();

table {
  display: inline;
}

<body>
  <table>
    <thead>
      <tr>
        <th>Att1</th>
        <th>Att2</th>
        <th>Att3</th>
      </tr>
    </thead>
    <tbody id="table1">

    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th>Att1</th>
        <th>Att2</th>
        <th>Att3</th>
      </tr>
    </thead>
    <tbody id="table2">

    </tbody>
  </table>
</body>

我刚开始接触js，我注意到了这个东西。从逻辑的角度来看，我认为这两个函数之间没有区别，第二个只是被分解以使代码更易于阅读。它应该只是将字符串添加到字符串，但似乎在每次操作时打开的标签都会被程序关闭，从而导致大量行。

这是为什么？这有什么用？

Answer 1

innerHTML 实际上不是字符串。它是 DOM（页面上的元素）的接口；从中读取会生成当前存在的字符串版本，并为其赋值会修改树。

DOM 中不可能有未闭合的 <tr> 元素——当您执行类似 table1.innerHTML += "<tr>" 的操作时，浏览器将未闭合的 <tr> 标记视为无效 HTML，必须通过插入结束 </tr> 来修复它。当您稍后访问 innerHTML 执行另一次修改时，您会看到 "repaired" 版本，而不是您最初分配的值。

最简单的解决方法是将整个 table 构建为一个字符串，然后一次性分配给 innerHTML，例如

var html = "";
for (...) {
   html += "<tr>";
   html += "<td>example</td>";
   html += "</tr>";
}
table1.innerHTML = html;

您可能还想研究 Javascript DOM 方法来创建 HTML 元素（如 document.createElement()）作为替代方法——innerHTML 是一个笨拙的界面。

Answer 2

好吧，innerHTML 内容是——顾名思义——HTML 而 HTML 不仅仅是一个字符串 。我假设您知道浏览器会从中构建一个 DOM。基本上是一棵节点树，知道它们的标签、属性、子节点等。

现在你需要这个 DOM 来渲染任何东西。当然，几乎不可能得到无效的 html，因为非 html 只能被解释为一个纯粹的字符串（这是有效的 html）。但是，浏览器会尝试尽可能地满足 html 标准。因此，它还会生成缺失的结束标记，以生成格式正确的 html。（即使它不在 html 中，他也会为 DOM 隐式生成它们，在某些浏览器中，您可以在开发控制台提供的 HTML 中看到它）。

所以现在您可以像这样 table2.innerHTML += "<tr>" 向 html 添加随机 <tr> 属性。这会产生格式不正确的 html。因此它应该生成缺少的结束标记。我不知道这是在运行 js 代码时还是在刷新 DOM 之后完成的，但通常它有助于生成格式正确的 HTML.

我相信您知道如何规避该问题，但无论如何：您可能需要查看 document.createElement() 而不是使用临时字符串。这通常用于以不混淆且安全（如 "something unexpected like above doesn't happen safe"）的方式生成格式正确的 html。

Javascript 自动关闭 HTML 个标签？

Javascript autocloses HTML tags?

html

javascript

arrays

for-loop

innerhtml