javascript - 调试 HTML 动态表时遇到问题

Question

为了调试玩具惯性飞船模拟，我在按键控制的 SVG 窗口下方列出了当前事件的按键。我决定将数据动态地放入表中以改善整个事物的外观，但不知何故我无法将数据放入实际的 td 标签中。相反，数据不断显示在表格单元格之外。

相关代码如下:

table, th, tr, td
{
  border-collapse: collapse;
  width: 400px;
}

.index
{
  border: 1px solid black;
}
.value
{
  border: 1px solid black;
}

<tr id="iostats">
  <td class="index">Keys:</td>
  <td class="value"></td>
</tr>

let iostats = document.getElementById( "iostats" );

所有这些都只是准备代码。以下代码位于计时器回调内:

  /* tmp will contain an array after this. */
var tmp = io.getState();

iostats.innerHTML =
  "<td class=\"index\">Keys:</td>" +
  "<td class=\"value\">" + 10 + "</td>";

for( var key in tmp )
{
  iostats.innerHTML += "<td class=\"value\">";
  iostats.innerHTML += " " + key + ":" + tmp[ key ];
  iostats.innerHTML += " </td>";
}

我的期望是键值、冒号以及与该键值对应的数据值将显示在数据单元格内。相反，如前所述，它们显示在单元格外部，从而缩小了所有单元格。

我期望 Javascript 函数内的语句按照它们出现的顺序有效执行，是不是有点错误？所有代码似乎都能运行，只是顺序错误。

Answer 1

innerHTML不能处于未闭合标签的状态，所以这段代码

  iostats.innerHTML += "<td class=\"value\">";
  iostats.innerHTML += " " + key + ":" + tmp[ key ];
  iostats.innerHTML += " </td>";

首先添加 "<td class='value'>" ，然后自动关闭它。然后添加文本，然后添加结束标记。要对此进行测试，请打开一个新选项卡，打开 Web 检查器并输入 document.body.innerHtml += "div"进入控制台。您会注意到在 Web 检查器中添加了一个 div 元素(带有结束标记)。

要修复它，只需一次完成所有操作即可:

iostats.innerHTML += "<td class='value'> " + key + ":" + tmp[ key ] + "</td>";

或

let addMe = "<td class='value'>"
 + " " + key + ":" + tmp[ key ]
 + " </td>"
iostats.innerHTML += addMe;

或者如果你想变得更奇特

iostats.innerHTML += `<td class='value'>${key}:${tmp[key]}</td>`;