CODEWITHSUNDEEP
javascripthtml
coil
coil

Reputation: 33

Appending table, tr, td tags to innerHTML does not create table rows

var menuStarters = [["chicken", "5.00"], ["salad", "4.11"], ["soup", "3.88"]];
document.getElementById("menu").innerHTML += '<table>';
for (var i = 0; i < menuStarters.length; i++)
{
  document.getElementById("menu").innerHTML += '<tr><td>' + menuStarters[i][0] + '</td><td>' + menuStarters[i][1] + '</td></tr>';
}
document.getElementById("menu").innerHTML += '</table>';

I'm sure I'm probably missing something obvious.

Upvotes: 3

Views: 2362

Answers (2)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

I've created a fiddle here

https://jsbin.com/jeguka/edit?html,js,output

var menuStarters = [["chicken", "5.00"], ["salad", "4.11"], ["soup", "3.88"]];
var html = '<table>';
menuStarters.forEach(function(item, index){
html += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
});
html += '</table>';
document.getElementById("menu").innerHTML = html;

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

You can't have partial tags in a document. Adding an opening <table> to the innerHTML will cause a full (closed) tag to be inserted. Subsequent additions are outside the table, where tr and td are illegal.

Build the string first, then add it to the container:

var menuStarters = [
  ["chicken", "5.00"],
  ["salad", "4.11"],
  ["soup", "3.88"]
];

var thtml = '<table>';
for (var i = 0; i < menuStarters.length; i++) {
  thtml += '<tr><td>' + menuStarters[i][0] + '</td><td>' + menuStarters[i][1] + '</td></tr>';
}
thtml += '</table>';

document.getElementById("menu").innerHTML += thtml
<div id="menu"></div>

Upvotes: 3

Related Questions