Question

为什么这两个函数会产生不同的结果？

＆＃13;

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();

＆＃13;

table {
  display: inline;
}

＆＃13;

<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>

＆＃13;

我刚从js开始，我已经注意到了这件事。从逻辑的角度来看，我看到两个函数之间没有区别，第二个函数刚刚被分解以使代码更容易阅读。它应该只是在字符串中添加字符串，但似乎在每个操作中，打开的标记都会被程序关闭，从而产生大量的行。

这是为什么？这有用吗？

Answer 1

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

在DOM中无法使用未关闭的<tr>元素 - 当您执行table1.innerHTML += "<tr>"之类的操作时，浏览器会将未关闭的<tr>标记视为无效的HTML并且必须通过插入结束</tr>来修复它。当您稍后访问innerHTML以执行其他修改时，您会看到＆＃34;已修复＆＃34;版本，而不是您最初分配的值。

最简单的解决方法是将整个表格构建为字符串，然后立即分配给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中看到它。）

现在，您可以在html中添加一个随机<tr>属性，例如table2.innerHTML += "<tr>"。这将产生不完善的html。因此应该生成缺少的结束标记。无论是在运行js代码时还是在刷新DOM之后完成，我都不知道，但通常它有助于生成格式良好的HTML。

我确定你知道如何规避这个问题，但无论如何：你可能想看看document.createElement()，而不是使用临时字符串。这通常用于在非混乱和安全的情况下生成格式良好的html（如在＆＃34;意外的事情，如上所述并不安全＆＃34;）。

Javascript自动关闭HTML标签？

2 个答案: