Can't set innerHTML on tbody in IE

internet-explorer, javascript

Solution

That is true, innerHTML on tbody elements is readOnly in IE

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

source: http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

You can do something like this to work around it:

function setTBodyInnerHTML(tbody, html) {
  var temp = tbody.ownerDocument.createElement('div');
  temp.innerHTML = '<table>' + html + '</table>';

  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}

Basically it creates a temporary node into which you inject a full `table`. Then it replaces the `tbody` with the `tbody` from the injected `table`. If it proves to be slow, you could make it faster by caching `temp` instead of creating it each time.

Problem

I have a table like this: ``` <table> <thead> <tr> <th colspan="1">a</th> <th colspan="3">b</th> </tr> </thead> <tbody id="replaceMe"> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </tbody> </table> ``` and a method returns me the following after an ajax request: ``` <tr> <td>data 1 new</td> <td>data 2 new</td> <td>data 3 new</td> <td>data 4 new</td> </tr> ``` I want to change the innerHTML like ``` document.getElementById('replaceMe').innerHTML = data.responseText; ``` However, it seems that IE can't set innerHTML on `<tbody>`. Can anyone help me with a simple workaround for this issue?

Original source