Unknown Runtime Error in Internet Explorer while using innerHTML

This is one of those awesome “features” of the Microsoft browser. One which can send web developers of the deep end.

Seems this error may happen due to several reasons:

• You are trying to put a block-level element inside an inline element like a div element inside a p element (see source 1)
• You are trying to set a table’s innerHTML (see source 2)
• You are trying to put a form element inside an element that is itself inside another form

By looking at those two sources you can easily fix the first two errors. On the third one i didn’t seem to find any sources for it so here it is.

I had a strange (read stupid) situation where i was trying to do the following

<form>

   <div id=”container”>

   </div>

</form>

<script type=”text/javascript”>

    <!–

    var obj=document.getElementById(‘container’);

    obj.innerHTML='<form>….. another form</form>’;

    //–>

</script>

Note that div is already inside another form tag. The code above will throw our URE friend since i am trying to put a form tag inside another form tag. Chrome and Firefox jump over this problem by doing some kind of code clean up on render.

In my case i chose to  replace the original form completely or avoid using the form tag in these situations. All together this seems like a design problem as situations like this should not occur in the first place.

Note that if you run into trouble with the prototype Ajax functions you might want to set the onException option in order to see what is really happening. Though in this case the exceptions isn’t particularly helpful since it only states : Unknown Runtime Error

 

Update:

If this happens to you when using prototype ajaxupdater, create your own ajaxreplacer that replaces the div instead of trying to set innerHtml.

Sources:

1. http://blog.rakeshpai.me/2007/02/ies-unknown-runtime-error-when-using.html
2. http://stackoverflow.com/questions/555965/javascript-replace-innerhtml-throwing-unknown-runtime-error#556020