Question

I’m creating a table with Javascript so in a loop there’s

if (formFieldData == 'cleanSlate')
{
  document.getElementById('productsTable').innerHTML = '';
  // clears what was there before, so we're left with an empty <table>
} else
{
  document.getElementById('productsTable').innerHTML += '<tr></tr>';
}

After a couple of iterations what I’m left with is this .. not sure how to display HTML for you so without the angle brackets:
tbody tr /tr /tbody tbody tr /tr /tbody

Why is it inserting those tbodys and how can I stop it doing that?

Answer 1

What browser is this?

You shouldn’t really be building up a table with innerHTML operations anyways. It’s just a string operation, and the browser will have NO CLUE that you’re adding multiple rows in sequence. So it’s going to attempt to “clean up” your “broken” html.

If nothing else, at least build up the table rows in a separate string and then stuff that varaible into innerHTML after the loop completes:

var rows;
for(...) {
   if (...) {
      rows += '<tr></tr>\n';
   }
}
document.getElementById('productsTable').innerHTML = rows;

Of course, this exact code won’t work – it’s just an example.