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>
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 .
… in a <p>
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…
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.
I don’t think Urka understands the problem very well.
Nice work here – you are right on Microsoft’s ‘great’ error messages, this one stumped me for quite a while! Thanks for your help…
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.
Well done. Microsoft is great lol and dont tease them
Firefox on the other hand is stupid for supporting such “incorrect” stuff.
Well done again
haaaaaa great!!! explorer is peace of shit. 5 browsers worked and this one gave me an informative error!
Thank you for the solution
Thanks.. You saved my life..
Thanks so much for posting this! Boy was I ever stumped. To their credit, this appears to have been fixed in IE 7.
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?
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.
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 !!
many thanks, it works!!!
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.
Thank you!! This tip was a life saver.
Thank you! This little tip was a life saver.
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 ….
table > div > tr >
thanks for posting the resolution to this!!!
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
Very thanks, I have this issue in my site ;/
thanks a lot, man! i’ve been searching how to fix this all day. u saved my day
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,
GOVO what exactly do you mean?
Hey your post helped me alot.. !
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.
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.
dreamluverz: Can you post a pastie of your code?
You solution really saved horus of work for me. Thans a lot dude
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‘.
Bah! I meant: Try for yourself: document.getElementById(’calendar_layer”).innerHTML = ‘<a href=”javascript:next_month()”>Next Month</a>
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
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
easyEye, gimp: strangely, it works for me…
I have uploaded a test page, can you tell me if it’s not working for you?
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:
Drawbacks: you cannot use the ‘u’-tag in the insert, MSIE7 will ignore floating styles, and the order of HTML-elements is changed
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.
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?
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.
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)
This post and all the comments helped me out a lot. I was facing a similar problem with a Ajax call. I was filling up an div element ‘description’. It raised the unkown runtime error because there was another element with that name…being <meta name=”description” value=”etc” />. So IE doesn’t make any distinction between name and ID attributes.
God, what a pathetic problem…
Thanks for posting, you’re a lifesaver
Thx a lot!
Hi, I applaud your blog for informing people, its just sometimes people seem to get themselves tied up in unnecessary knots over something that’s very simple.
Thank you for your help!
Hi all, sorry for my English……
i solved the prblem using “innerText”
successively i saved the content in a variable and
successively insert all in my Div usign “innerHTML”
bye
I had a problem with the same simptoms, it worked in all of the browsers except IE7, Unknown runtime error and using .innerHTML on a div. Thou your solution was not helpful, i found out that the id od the div cant only be a number, it has to have chars too. Using id=”152″ did not work, however id=”152-IE7Sucks” did.
this should b obvious…
BUT for anyone who’s doing integration and is going through heaps of codes…
If the injection occurs in a form tag
Plz make sure the innerHTML that your injecting does not contain another form tag
or u’ll hav tis famous error also
This was helpful. What caught me, was that the block element was created no problem. It just couldn’t take changes after the fact.
Thanks again.
IE tends to confuse an element’s Name property and Id property. It means that, when there is an input element as <input name=’someelement’> and a div element as <div id=’someelement’>, getElementById(’someelement’) may return the <input> element instead of the <div> element.
so it’d be helpful to look into the TagName of the element you are trying to set the innerHTML, as the following example:
catch(ex) {
alert(obj.tagName);
}
Nice that you can nest block elements inside an [a] in the HTML but can’t do it by updating via JS. IE8’s out now, can’t MS kill 6? Normally I’d hate so say “Microsoft, please force an update on me via Windows Update” but this is one exception to that.
When in doubt, switch from Ps to DIVs. No idea why that has any bearing on anything because what I was doing was using Prototype’s “wrap” function to wrap an A in another DIV then insert a second DIV inside the first div ahead of the A (an absolutely-positioned overlay over the original A which contained an image, using the “wrapper” div which had its position set to relative to allow it to line up correctly).
It worked fine in some instances but not in others (got the “unknown error” or NO ERROR AT ALL (zero feedback, it just refused to do what I was telling it to — nice!) depending on how I wrote it).
I finally noticed that the ONLY difference was that the ones that worked had a DIV as the immediate ancestor of the A but the ones that didn’t had a P as the ancestor. Switching to DIVs fixed it (just plain old P and DIV tags in the HTML, no CSS applied, not written in dynamically…).
Why the parent element had any effect at all I can’t imagine because all of the DOM changes were further down the tree, and the wrap wasn’t the problem, it was inserting that second div which was then inside a div so it shouldn’t have had this problem, but it is what it is.
I just had this problem in IE8, when I was trying to put Ajax form in a DIV. I just had forgotten that form tags where already opened around the div.
They could at least rename this to “Web standarts error” or something, it would be more helpful.
I googled ‘getelementbyid Ie6 runtime error’ and this was the first search result. I had exactly the same problem you are having in your blog post and I thank you for pointing out this solution.
-Justin
big help, thanks for the post. Dumb to require email addresses for comments, though.
Thanks, my error was I had a <a tag surrounding div tag (it was a same page #anchor tag); closed the tag before starting the div and all was well
Hi,
I am facing same problem.I am using div but still error is coming.
Please help me out.
My code is
No need for fanboyish Microsoft Bashing, please.
And BTW, MSIE8 still does this (same error message), so it’s not an MSIE6 issue.
Another data point:
In IE7, I was trying to replace a table via AJAX:
getElementById(”table”.innerHTML = http.responseText;
…
…
…
and IE7 gave this error.
When I enclosed the table in a :
<div id="tableContainer"
…
then *both* of these worked:
getElementById(”table”.innerHTML = http.responseText;
getElementById(”tableContainer”.innerHTML = http.responseText;
HTH
– ben
Let’s try that again. Another data point:
In IE7, I was trying to replace a table via AJAX:
and IE7 gave this stupid “unknown runtime error” message.
When I enclosed the table in a <div>:
then *both* of these worked great:
That is, I could replace both the table and the table container by their IDs.
HTH
– ben