Why is document.getElementById('tableId').innerHTML not working in IE8?

Question

I modify document.getElementById('').innerHTML with Java Script in a page. It's working fine in Firefox, but not IE8. Please see below for more details:

HTML Code:

<table>
  <tr id="abc">
     <td id="ccc" style="color:red;">ccc</td>
  </tr>
</table>

Java Script code:

  document.getElementById('abc').innerHTML = '<td id="bbc" style="color:yellow;">abc</td>'

When I run the JS code in Firefox, it will change the display word from 'ccc' to 'abc', but it's just not working in IE8, does anyone know why? Is there any way I can make this work in IE8 as well?

Answer 1

Since the problem is in IE8, see MSDN:

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.

(emphasis mine)

Colin's work-around (setting innerText on the td instead of innerHTML on the tr) is a good one in your case. If your needs become more complex, you'll have to resort to The Table Object Model.

Answer 2

Since TR's innerHTML is read-only as a few people have said, you are better off changing your markup to target the TD:

<table><tr><td id="changeme"> ... </td></tr></table>

Then you can set the content of the TD as you wish via innerHTML, and change other properties by setting them on the DOM node:

var td = document.getElementById("changeme");
td.innerHTML = "New Content";
td.cssText = "color: red";
td.className = "highlighted";

You get the idea...

This saves you the overhead of destroying and creating an extra DOM element (the TD)

Answer 3

On another StackOverflow question I found a link to a blog post written by the guy who implemented that part of the Trident engine. It is a design flaw (due to lack of time and backward compatibility issues) that was never fixed. You can read his notes (including his personal workaround) here.

However, to fix it on my project, since I was already using jQuery, I just used jQuery's .html() function.

// OLD 
localRows[cIndex].innerHTML = '<div>Test Div</div>';

// FIXED
$(localRows[cIndex]).html('<div>Test Div</div>'); 

Answer 4

I believe IE behaves strangely when you play with the innerHTML of tr elements. I would select the row with getElementById, and then select the td and alter that one's innerHTML:

document.getElementById('abc').firstChild.innerHTML = 'abc';

(Though you have to be careful with this: often the whitespace between the tr and the td will be considered a valid node)

There's a whole heap of special functions for working with tables in the DOM

var tblBody = document.getElementById(tblId).tBodies[0];
var newRow = tblBody.insertRow(-1);
var newCell0 = newRow.insertCell(0);

See all the functions here: http://www.mredkj.com/tutorials/tablebasics1.html

Answer 5

innerHTML is readonly for as pointed out here: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

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.

Why are you not just putting an idea around the and changing that particular value?

Answer 6

Instead of a <div></div>, you can also use <span></span>

Answer 7

Use this instead:

document.getElementById('abc').innerText = 'ccc';

Answer 8

Thanks its very helpful .html()

I was using

document.getElementById('site'+cValue).innerHTML=tableReadyElem; //work with mozila not ie

$(document.getElementById('site'+cValue)).html(tableReadyElem);//work for both