Unknown runtime error in Internet explorer?

If you’re getting an “unknown runtime error” in internet explorer while using the javascript method object.innerHTML=”…some html”, here is a hint to put you on the right track: you’re probabily trying to put a block-level element inside an inline element.
For example, given the html code:

<p id="the_container">Hello</p>
 
<script type="text/javascript">
<!--
var obj=document.getElementById('the_container');
try
{
obj.innerHTML='<ul><li>List item 1</li><li>List item 2</li></ul>'; 
}
catch(ex)
{
alert(ex.message);
}
//-->
</script>

In internet explorer, a dialog will pop up complaining about an “unknown run-time error” (Thanks Microsoft for your helpful error messages). The solution (if you really can’t force your users to use Firefox :)) is to sobstitute the parent element with a block-level one, such as a DIV:

<div id="the_container2">Hello</div>
<script type="text/javascript">
<!--
var obj=document.getElementById('the_container2');
try
{
obj.innerHTML='<ul><li>List item 1</li><li>List item 2</li></ul>';
}
catch(ex)
{
alert(ex.message); // never displayed
}
//-->
</script>

41 Responses to “Unknown runtime error in Internet explorer?”

  1. Your solution is correct, however the reason stated (”you’re probabily trying to put a block-level element inside an inline element”) is not.

    The real reason why this alert happens is that you cannot nest block level elements in a .

  2. … in a <p>

  3. Thanks for the clarification, Darin! I had to use a little bit of fantasy to explain what “unknown runtime error” meant :)
    Now that I think about it, a <p> isn’t even an inline element…

  4. i am not able to shown the text in formatted form in the textarea..
    whenever i use document.getElementById(”id”).innerHTML=”…….”.
    i get the error…unknown runtime error…and when i use div tag or span….the textarea gets disappeared and the text is shown in formatted form..
    so can u suggest me some solution for this kind of error.

  5. I don’t think Urka understands the problem very well.

  6. Nice work here - you are right on Microsoft’s ‘great’ error messages, this one stumped me for quite a while! Thanks for your help…

  7. This was helpful. I found that it was happening to me when I was doing an innerHTML insert inside a table cell. Same completely non-helpful error message, but it was related to innerHTML nonetheless.

    Thanks.

  8. Well done. Microsoft is great lol and dont tease them :P Firefox on the other hand is stupid for supporting such “incorrect” stuff.

    Well done again :)

  9. user's GrAvatar Mindaugas Lukosius

    haaaaaa great!!! explorer is peace of shit. 5 browsers worked and this one gave me an informative error!
    Thank you for the solution :)

  10. Thanks.. You saved my life..

  11. user's GrAvatar Natasha D'Silva

    Thanks so much for posting this! Boy was I ever stumped. To their credit, this appears to have been fixed in IE 7.

  12. This page helped me in the past, and now another problem with my code led me back to this page (in other words, thanks!). Firefox is forgiving about nesting a tag directly inside of a tag, but Internet Explorer 7 (and I assume previous versions) will give its unknown runtime error in this case as well.

    Is there an add-on for Internet Explorer to provide more informative JavaScript error information?

  13. I had this problem too in IE6… I was trying to write <li> elements using innerHTML. Worked fine in other browsers but not in IE6.

    Only way to fix it was to write in a whole new list, with ul and /ul surrounding my individual li and /li.

  14. Great !! I had the same problem and was unable to understand what was wrong… Your post gave me a clue to aim my research… Now, it works !! Thank you !! :-D

  15. many thanks, it works!!!

  16. Thanks for the post. I had a similar issue, and it was reading the feedback here that helped resolve it. Apparently IE7 chokes if you try and set the innerHTML of a TABLE element. Changed over to DIV, and it worked famously.

  17. Thank you!! This tip was a life saver.

  18. Thank you! This little tip was a life saver.

  19. Great solution. Question however, what if you have a table which you want to replace all the rows inside of? It is incorrect to have a ….

  20. table > div > tr >

  21. thanks for posting the resolution to this!!!

  22. Guys, in my case it was just an unclosed <a> tag, try to validate your document, so that everything is correct according to standards that will save you lot of time

  23. Very thanks, I have this issue in my site ;/

  24. thanks a lot, man! i’ve been searching how to fix this all day. u saved my day

  25. yep…I found that not every element is suitable to work with innerHTML, for example A, even you just input a simple text.
    but,if you just chang the innerHTML to “”, seems no errer occured, every element accept that, :D

  26. GOVO what exactly do you mean?

  27. Hey your post helped me alot.. !

  28. I also have the same issue. In my case my ajax returns a form to be placed on a with id on it using innerHTML and didn’t work.

  29. I reposted it coz it ommitted the div tag
    ===============
    I also have the same issue and still can’t fix it. In my case my ajax returns a form to be placed on a ‘div’ with id on it using innerHTML and didn’t work.

  30. dreamluverz: Can you post a pastie of your code?

  31. You solution really saved horus of work for me. Thans a lot dude

  32. I tried to ajax an A into a DIV using innerHTML, but that doesn’t work in MSIE7. I had to use the DOM method (with createElement and appendChild) to insert the Anchor.

    Try for yourself: document.getElementById(’calendar_layer’).innerHTML = ‘Next Month‘.

  33. Bah! I meant: Try for yourself: document.getElementById(’calendar_layer”).innerHTML = ‘<a href=”javascript:next_month()”>Next Month</a>

  34. I’m having the same prob, trying to use innerHTML to put an <a> inside a … I’d like to avoid appendChild if I can :(

  35. Bah as well!

    I’m having the same prob, trying to use innerHTML to put an anchor tag inside a div tag… I’d like to avoid appendChild if I can :(

  36. easyEye, gimp: strangely, it works for me…
    I have uploaded a test page, can you tell me if it’s not working for you?

  37. Grpmf, your page works here, but your page has no html-closing tag.

    My HTML-to-insert comes through AJAX and the HTML-to-insert-in is generated (by Apache/2.0.58 (iSeries) Server op 10.0.1.24 Poort 8057)

    When I work around the AJAX the error remains, so probably the fact that my html is generated makes the error come forward.

    When I download a generated page and work around the AJAX call, everything works fine in MSIE7.

    My workaround for generated pages:

    function insertHTML(target_reference, source_text){
      //msie7 cannot digest anchors from ajax in generated pages
      
      try {
        target_reference.innerHTML = source_text;
      }
      catch(e) {
        //setup temporary tags; abuse the obsure 'u'-tag
        rep1 = source_text.replace(/\&lt;a /g,'\&lt;u '); 
        rep2 = rep1.replace(/\/g,'\');
        target_reference.innerHTML = rep2;
        false_anchors = target_reference.getElementsByTagName('u');
        //setup new anchor-tags
        for (c=0; c-1; c--) false_anchors[c].parentNode.removeChild(false_anchors[c]);
      }
    }
    

    Drawbacks: you cannot use the ‘u’-tag in the insert, MSIE7 will ignore floating styles, and the order of HTML-elements is changed

  38. hi there. juz got back to your site. Can you try using ajax and the return value is a form to be Placed on a div using innerHTML.

  39. easyEye: I added the html closing tag, but it still works for me.
    dreamluverz/easyeye: Both of you are using ajax to load the content. Do you use any specific library to do the ajax stuff? And if you don’t, can you share a simple test case (perhaps using pastie so the code looks readable)?
    Have you tried calling the ajax page directly from the browser to see what exactly is being returned?

  40. glJakaL: Your testpage also worked here. I also made a testpage with my specific needs, and that also worked here. When I inserted it all into my html-templates (that’s how my site works) it didnot work when the input came from ajax, nor when i bypassed ajax by putting the ajax-output in a string. Now when i saved the generated html with the ajax-output in a string, it worked again!

    Hence, the problem lies with the way the document is read in. I have seen the problem before in sereveral browsers, when i was working with xml and xslt.

  41. I was very pleased to discover your page, as I was approaching the hair-tearing stage with one of these. Super-helful, that ‘runtime error’ alert, isn?t it? Especially with the approximate way that IE guesses at line numbers.

    Mine was a variation, though. Still Explorer only, so far (no issues in FF, Safari). And still an ‘innerHTML’ DOM issue, AFAIK.

    Not a ‘block’ level issue, this time. I thought it could be, since the ‘display’ attribute could be flipping to ‘inline’ as things are switched visible and invisible, but I tried flipping it explicitly to ‘block’ (and it?s a ‘div’, not a ” or a ”. And my script is running the same line to a stack of other ‘div’s, and they all worked fine.

    I made it go away when I spotted that 2 ‘div’s had similar IDs (one called ‘SkinSize’, the other called ‘Skins’). Thanks, Bill. I thought the idea of IDs was that they worked on exact equivalence, not loose similarity. So it looks as though IE read the first 4 characters (maybe with a case-insensitive peek at char 5) and thought, ?close enough? then chucked an error when it hit a conflict. That?s a frankly terrifying discovery. Three cheers for Redmond, eh?

    Thanks for the pointer. I?m sure there?s more lurking in the murky depths behind this little puzzle. (Sorry for the long post)

Leave a Reply