Debugging IE8 Javascript Replace innerHTML Runtime Error

Question

function DeleteData(ID)
{
 var ctrlId=ID.id;

 var divcontents=document.getElementById(ctrlId).innerHTML;
 var tabid=ctrlId.replace(/div/,'tab');
 var tabcontents=document.getElementById(tabid).innerHTML;
 alert(document.getElementById(tabid).innerHTML);
 document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
 document.getElementById(ctrlId).innerHTML='';

}

I am trying to replace the Table with empty table but

document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";

this line is causing Unknown Runtime Error

Multivocal

Answer 1

You can't set value to a table's innerHTML, you should access to child cells or rows and change them like that :

document.getElementById(tabid).rows[0].cells.innerHTML = 'blah blah';

For more info/example : Table, TableHeader, TableRow, TableData Objects

Lit

actually, in IE8 it's document.getElementById(tabid).rows[0].cells[0].innerHTML = 'blah blah'; – Faythe

what if i want to change the table structure i mean make 3 row from 4 row on a event using js. – Peninsula

Answer 2

In IE8, you cannot change the innerHTML of an object when the code that attempts that is fired from within the object.

For example:

<span id='n1'>
  <input type=button value='test' onclick='DoSomething(this);'>
</span>

with the following code tucked in some remote corner of your document:

<script type='text/javascript'>
  function DoSomething(element)
  {
    document.getElementById("n1").innerHTML = "This is a test"
  }
</script>

This will fail with the error unknown runtime error. I believe it has to do with the fact that you're trying to replace the HTML code which fired the current line of execution. The onclick event is part of the code being replaced by the DoSomething function. IE8 doesn't like that.

I resolved my issue by setting a timer event for 250 milliseconds, such that the function called at the end of the 250 milliseconds replaces the span's innerHTML.

Isometry

bah, why do I bother. Damn board ate half my example. – Isometry

Answer 3

I find out that in IE8 some elements are in readonly: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Therefore if you try to set innerHTML for these elements IE8 notify alter with Unknown Runtime Error.

More details here: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.

The simplest way is to convert read-only elements to div element.

Brumaire

At least with IE8 + the title element, you can do: document.getElementsByTagName('title')[0].text = 'My Title'; – Bend

@Andrew Solved my issue with a <script> in a different frame too – Gadson

Legend elements are also read only. Thanks for posting this, saved me! – Include

Answer 4

I had the same issue but my error was because I was inserting a p tag directly underneath a p element as in:

document.getElementById('p-element').innerHTML = '<p>some description</p>';

I don't really see how this is HTML format error; seems more like another IE8 bug.

Mutilate

<p> tags should not be nested, it's in the HTML spec. Pretty unnecessary for IE8 to block that though! – Bilberry

Got the same issue with the p tag. Changed that to a div and everything worked fine. – Rima

Answer 5

Great, I had the same situation with setting the innerHTML. When I read this I realised that one of the elements was a TR and one was a TD and the TD was working.

Changing the code so that they're both TDs fixes it, which means that it is a rather non-obvious problem caused by the structure of tables.

Presumably it throws the DOM awry when I start changing table rows since it can't store the table as an array any more.

I'm sure IE could give a more informative error message since it can't be that uncommon for the DOM to change on the fly and it seems strange that this would only throw an error for tables.

Teresa

Answer 6

Ohh yes - remember that the HTML structure has to be valid.

I tried loading an entire page into a <p> tag - it failed (obviously), changing it to a <div> tag solved my problem!

So remember the HTML structure!

Jauregui

Answer 7

why it happend in IE...

case scenario:

Javascript unknown runtime error in IE while accessing Div inside Div to add ajax contents.

solution:

dont ever place nested divs in between the form tags to play with there contents .. :)

Hilaryhilbert

Answer 8

When using YUI try to use

Y.one('#'+data.id).setContent(html); 

instead of:

Y.one('#'+data.id).set('innerHTML' , html);

Trig

Answer 9

If you need to set innerHTML to "" (empty string) then you can use removeChild instead

Turboelectric

Answer 10

This is not a Big issue, since i faced same problem few days ago and the reason this error occurs in ie is that - There exists an error in our html format or you are using an element other than <td> to replace innerHTML ie use only, dont use tables,divs to replace innerHTML.

• SwapnilK

Wring