Internet Explorer (IE) friendly table DOM manipulation

Occasionaly we can manipulate HTML DOM easily by accessing the innerHTML of an element. In IE however, the following elements’ innerHTML are read only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

This code will fail in IE

tBodyEl.innerHTML = '

' + 'Some Cell Value' + '


A more IE friendly solution using DOM table functions.

var row = tBodyEl.insertRow(0);
row.setAttribute('height', '24px');
var cell = row.insertCell(0);
cell.setAttribute('colspan', '7');
cell.innerHTML = 'Some Cell Value';