Question

I am writing a table inside a DIV using the JavaScript innerHTML property

listing.innerHTML += '<table> <tr><td><img src='+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>'; 

listing.innerhtml += '<td class="name">' + friends[a].split("|")[0] + "</td>";

listing.innerHTML += "<td><button id='add' onclick=write() /> </td> </tr> </table>";

To the div with the ID ‘listing’ , the content is written without the table tags i.e. <td> </td> </tr> <tr>.

i.e. the required content appears but is not formatted as an HTML Table. When I look at the source in a browser, the TR and TD and closure tags for the same are missing.. Any idea why? I am using Chrome.

Answer 1

var tbl = '<table> <tr><td><img src='+ pic + friends[a].split("|")[1] + '/picture"' + ' class="pic" /></td>';
tbl += '<td class="name">' + friends[a].split("|")[0] + "</td>";
tbl += "<td><button id='add' onclick=write() /> </td> </tr> </table>";

listing.innerHTML += tbl;