innerHTML elements in wrong place

Question

My understanding of innerHTML isn\'t completely clear so I\'m having some trouble.

This produces all of my td\'s outside of the table. What am I doing wrong?

Answer 1

Since you're appending invalid HTML, the browser is helping you by adding the elements you missed out. Then, when you add your table cells, they get appended after the closed table.

Try adding the table, then the row, then the cells. Also, build the whole string first then append it in one go, updating the DOM (ie. using innerHTML) is a slow operation.

var list = document.getElementById("procTable");
var listInner = "<table style='border:gray solid 1px;'><tr>";
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) {
   listInner += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption) + "</td>";
}
listInner += "</tr></table>";
list.innerHTML = listInner;

Answer 2

This sometimes happen if you don't close your tags correctly. in your example:

var list = document.getElementById("procTable");
list.innerHTML = "<table style='border:gray solid 1px;'><tr>";
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) {
    list.innerHTML += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption)+ "</td>";
}
list.innerHTML += "</tr></table>";