document.getElementById().innerHTML fails with 'Unknown Error' in IE

Question

Hello,
I'm trying to use document.getElementById().innerHTML in a JavaScript to change information in a webpage. On FireFox this works as described in the W3C documentation, however, the same method returns 'Unknown Error' in IE. The JavaScript looks like this:
        <script type=text/javascript>
            function Change_Info (ID, ROW, VALUE) {
                if (document.getElementById){
                     var ntext = "<td width=4\% bgcolor=#FFFFFF>&nbsp;</td><td width=92\% bgcolor=#FFFFFF colspan=2><font face=Arial size=2 color=#5578C4>" + VALUE + "</font></td><td width=4\% bgcolor=#FFFFFF><center>&nbsp</center></td>";
                     document.getElementById( ID + "-" + ROW).innerHTML = ntext;
                     return false;
            }
}

The script is called by a MouseOver event like this:
onmouseover='Change_Info("thetag","1","Some Info");

The script would combine ID with a - and then ROW, which, in this example would be, thetag-1. The exact tag does exist in the html document. Using getElementById with the hardcoded tag name, reveils the same error, and the variable method is the prefered one in this situation.

To questions regarding why full html table information is in ntext, for whatever reason nested ID's fail on *both* FireFox and IE, even though the W3C specification states it should work (obviously both browsers have not fully implimented the W3C specs as persceribed). If someone knows of the way to access and change nested ID's, that works in both FireFox and IE, I'd sure like to know it.

Additionally, as yet I'm only getting this 'Unknown Error' in IE when using innerHTML to *change* the information. Reading works without error.

Can someone point out where my scripting error is so that I can swap text 'messages' on mouseover events.

Thanks.

Answer 1

After many hours of testing different methods and routines, I finally was able to make a not so W3C complient method that works as it should. The method works in both FF and IE without error. Additionally this not so W3C complient method works without having to write the entire table elements, rather just the text to be changed. I guess you can't always rely on the documentation.

I no longer need your assistance.

Answer 2

The problem you described above is exactly what I have run into...how did you solve it exactly??? Did you move the element out of the table? Pleeease let me know :)
Thanks a million!

Answer 3

Working on the same problem...

tried

"getElementsByName" (instead of "getElementById")... no luck

tried using

name="myelement" id="myelement" .... no luck

also tried

document.all.getElementById   ... no luck

Of course there's no issue in Firefox...., just IE...

Answer 4

//Got some code from :
//http://www.permadi.com/tutorial/jsInnerHTMLDOM/index.html
//hope this helps...

if (document.getElementById)
{
    var replace=document.getElementById('abc');
    if (replace)
    {
        if (replace.childNodes[0])
        {
            replace.childNodes[0].nodeValue=thisHtml;
        }
        else if (replace.value)
        {
            replace.value=thisHtml;
        }
        else //if (replace.innerHTML)
        {
            replace.innerHTML=thisHtml;
        }       
    }
}

Answer 5

I am having the same issue, but the code snippet geekinout posted above results in the same error. Has anyone else figured out a different solution?

Answer 6

In my code, I'm swapping out the content of a DIV element using the innerHTML property. The string of HTML I was assigning the DIV's innerHTML property to contained <FORM> tags. Sometimes (very rarely) it would generate an 'Unknown Error' in IE6. I fixed this error by removing the <FORM> tags from the HTML string I was assigning to the DIV's innerHTML property.

Answer 7

I'm having the same error. It is caused because I put a <div> into it, but there is no way I can remove it.

someone please help! (it would help if everyone used firefox.....)

Answer 8

I have the same error. It is caused by a <div> that should be in the <div> in the body, but the <div> I want to insert can't be removed. Can someone help me?

(it would help if everyone used firefox..)

Answer 9

I have little doubt that there are a hundred ways to cause this problem.  Here's what happened to me.

I tried to discover if I even had the right <div> using...

var container = document.getElementById("total");
alert(container.innerHTML);

It came up empty when it shouldn't.  So I gave the <div> a name, "name=blah" and tried to see it.

alert(container.name);

The name the alert gave me was "total"!!!!!  So I searched through my code to see what else used the name "total."  Sure enough, I found something.  What my code had was...

...
<input type=hidden name=total value=0>
...
<div id=total name=blah>some text</div>

Brain-dead IE was taking the first item using EITHER the name or ID assigned "total" rather than the ONLY item with an ID of "total."  It took me hours to figure this out.

I changed my <div>'s ID to "dangiedivtotal" and re-ran my alert test.  Sure enough, everything worked, including the innerHTML assignment.

So, Rule #1: never use the same name for name= or id= in multiple tags assuming IE is smart enough to know the difference between them --- it isn't.  IE's implementation of getElementById looks at **both** the name= and id= references and takes the first one it finds.

Answer 10

I've been fighting this issue a lot as well.  I was confused where the error was coming from because I'm passing Javascript to the page via PHP, and then using execScript to run it in an already loaded page and change out content using innerHTML

The source of the error, though, was simply in what I was putting in the element via innerHTML.  eg, don't put <form> or <p> inside a <p> element!

I hope this helps someone.  I'm sure I'll run into the error again, though.  Apparently it comes up quite a bit, with very little explaination.

Answer 11

In my case the issue was caused by trying to adjust the .innerHTML of a form.  Works fine in FF, blows up with an unknown error in IE.  The IE script debugger was, unfortunately, useless.

this fails:

Code Block

<form id='test'></form>
<script>document.getElementById('test').innerHTML = 'whatever';</script>

this works:

Code Block

<span id='test'><form></form></span>
<script>document.getElementById('test').innerHTML = '<form>whatever</form>'; </script>

Answer 12

Support for .innerHTML on tables in IE is sketchy at best.

The bugs are reported/tracked here:

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

Your best bet is to insert the whole table as one .innerHTML call, or use the DOM methods (be weary of attribute naming)

Answer 13

Found a fix that seems to work. (At least in IE)

NOTES:
- APResults is the div id which is empty at first like this: <div id='APResults'></div>
- valueIamdisplaying is whatever you are trying to put into the div

When I tried this in javascript:

document.getElementById('APResults').innerHTML = valueIamdisplaying;

It would work at first and fail randomly afterwards. I then tried this approach:

  ge = document.getElementById('APResults');
  ge.style.display = "block";
  ge.innerHTML = valueIamdisplaying;

And it works everytime. It would seem that it needs a placeholder for the element object and the style update to work consistently. Hope this helps.

Answer 14

I had the same issue. My solution was to find an un-closed div that preceded my well-formed div. Once I removed the un-closed div, the <divname>.innerHTML = "sometext"; worked....

An other solution would be verify that all preceding div's are well formed.

Answer 15

Well, peculiar situation!

This error occurs because I'm trying to pass a <div> tag to innerHTML of a <p> tag.
As you know we shouldn't use
<p>
<div>blah</div>
</p>
That's why IE return error... but could be a perceptible error at least... unknown error could be 100 million things, I think!

But we can use
<div>
<p></p>
</div>

Or
<div>
<div>
</div>
</div>

So I change my <p id=blah></p> to <div id=blah></div>. Now I can do a document.getElementById('blah').innerHTML = '<div id=xexe></div>';

Answer 16

If you are already using, or thinking of using jQuery, $('#myid').replaceWith('new content') works fine on old and new browsers, although not necessarily giving the same layout as innerHTML.

Answer 17

THANKS!!!!! YOU DON'T KNOW HOW I TRIED TO FIND THE SOLUTION... AND IT WAS THERE!!!! JUST A SIMPLE TAG!!!!! YOUR ANSWER HELPED ME VERY VERY MUCH. I'M SORRY FOR MY ENGLISH. BYE-BYE!!!

Answer 18

I was having the same problem everyone else was having. My original code was:

    document.getElementById("outputTxt").innerHTML = outString;

and it worked fine in Firefox and Chrome but not ie.

I tried nearly all the simpler suggestions on this page, and non of them worked. It seems the problem is in my outString variable. Perhaps that it contains new line characters.

My final solution was:

    element = document.getElementById("outputTxt");
    element.innerHTML = "Won't work in msie. Use a different browser such as Firefox or Chrome.";
    element.innerHTML = outString;

This works because compliant browsers are able to overwrite the first output text with the correct correct text, while ie can't handle the outString variable (and it doesn't even know why it can't handle it)