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 = "";
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) {
   listInner += "";
}
listInner += "
" + (result.d.ProcessDataColumnModel[i].Caption) + "
";
list.innerHTML = listInner;