javascript - 带数组的循环不适用于 innerHTML

Question

我有一个带有 ID="ranking" 的 div，我想在那里放一些 JavaScript 数组的信息和一个表格，其中每一行都有两列:一个用于 dados[i][25] 和其他 dados[i][26]。

我的代码是这样的:

function dadosRanking(dados){
        document.getElementById("ranking").innerHTML += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'
        for(var i=1;i<6;i++)
        {
          document.getElementById("ranking").innerHTML += '<tr><td>' + dados[i][25] + '</td><td>' + dados[i][26] + '</td></tr>';
        }
        document.getElementById("ranking").innerHTML += '</table>';
}

我期望的代码是这样的:

<table class="table">
  <tr>
    <td valign="middle" class="question" colspan=2>
      <h1>RANKING (+ PONTOS)</h1>
    </td>
  </tr>
  <tr>
    <td>PONTOS</td>
    <td>UTILIZADOR</td>
  </tr>
  <tr>
    <td>
      100
    </td>
    <td>
      Username
    </td>
  </tr>
</table>

然而，HTML代码脚本写的是这样的:

<table class="table">
  <tr>
    <td valign="middle" class="question" colspan=2>
      <h1>RANKING (+ PONTOS)</h1>
    </td>
  </tr>
  <tr>
    <td>PONTOS</td>
    <td>UTILIZADOR</td>
  </tr>
</table>
"100Username"

Answer 1

每次更新 innerHTML浏览器将解析它并呈现它，为此它还会尝试“修复”您的 HTML。这可能会产生意想不到的后果。而不是推送到 innerHTML使用部分表定义，将 HTML 收集到一个单独的值中并推送到 innerHTML一次。

function dadosRanking(dados){
    var s = "";
    s += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'
    for(var i=1;i<6;i++) {
        s += '<tr><td>' + dados[i][25] + '</td><td>' + dados[i][26] + '</td></tr>';
    }
    s += '</table>';
    document.getElementById("ranking").innerHTML += s;
}

之后

document.getElementById("ranking").innerHTML += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'

innerHTML 变成:

<table class="table">
  <tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr>
  <tr><td>PONTOS</td><td>UTILIZADOR</td></tr>
</table>

请注意，该表已关闭!

之后

document.getElementById("ranking").innerHTML += '<tr><td>foo</td><td>bar</td></tr>';

innerHTML 变成

<table>..</table>
foobar

<tr>和 <td>在表上下文之外无效，因此已将其删除。

之后

document.getElementById("ranking").innerHTML += '</table>';

innerHTML 没有改变，因为 </table>什么都不做，没有要关闭的表。