Javascript自动关闭HTML标签？

Question

Javascript自动关闭HTML标签？

its*_*iao 3 html javascript arrays for-loop innerhtml

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

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

Run Code Online (Sandbox Code Playgroud)

table {
  display: inline;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

dus*_*uff 7

innerHTML实际上不是一个字符串.它是DOM的接口(页面上的元素); 从中读取会生成当前存在的字符串版本,并为其分配值会修改树.

<tr>在DOM中不可能有一个未关闭的元素 - 当你执行类似的操作时table1.innerHTML += "<tr>",浏览器<tr>会将未关闭的标记视为无效的HTML,并且必须通过插入关闭来修复它</tr>.当您以后访问innerHTML以执行其他修改时,您会看到"已修复"版本,而不是您最初分配的值.

最简单的解决方法是将整个表构建为字符串,然后立即分配给innerHTML所有表,例如

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	7 年，9 月前
查看次数：	55 次
最近记录：	7 年，9 月前