For loop with array doesn't work with innerHTML

Question

I have a div with the ID="ranking" and I'd like to put there some info of a JavaScript array with a table where every row has tow columns: one for dados[i][25] and other for dados[i][26].

My code is this:

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>';
}

The code I expect was this:

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

However, the HTML code script write is this:

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

Is there any other section in your code that references the ranking element? — Little Santi
– Little Santi, Commented Dec 11, 2015 at 21:23
No. The only references of ranking are the ones that I wrote here. — user3746625
– user3746625, Commented Dec 11, 2015 at 21:26
@LittleSanti not sure if you missed it but I posted an answer 20 minutes ago. — Halcyon
– Halcyon, Commented Dec 11, 2015 at 21:46
@Halcyon Yes, just a few minutes ago. I liked it and upvoted it. — Little Santi
– Little Santi, Commented Dec 11, 2015 at 21:48

Halcyon · Accepted Answer · 2015-12-11 21:24:59Z

Everytime you update innerHTML the browser will parse it and render it, to do that it will also try to 'fix' your HTML. This can have unintended consequences. Instead of pushing to innerHTML with a partial table definition, collect the HTML in a separate value and push to innerHTML once.

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

After

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

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

Note that the table has been closed!

After

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

innerHTML becomes

<table>..</table>
foobar

<tr> and <td> are not valid outside of a table context so they're removed.

After

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

innerHTML doesn't change because </table> doesn't do anything, there is no table to close.

Collectives™ on Stack Overflow

For loop with array doesn't work with innerHTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related