Re: node.innerHTML = '...' not working in IE



Hey, guys - I've actually gotten even closer to solving the problem,
and I found out it has nothing to do with the contents of "listings"
(in fact, the same javascript error is thrown when I try to set the
suggest_box div to some hard-coded text, e.g.
"document.getElementById('suggest_box').innerHTML = 'text'; "). I
traced the problem back to where I am defining the parent node of the
textbox for which I want to use the suggest box on. Basically, here's
what I'm trying to do. I want to place the suggest_box div node right
next to the textbox so that it will display in the right spot. So
first, I create the suggest_box div:

[------------------------------------------
var suggest_div = document.createElement('div');
suggest_div.id = 'suggest_box';
--------------------------------------------]

Next, I want to place this right next to the textbox - so basically I
need to make the suggest_box div a sibling of the textbox and use the
insertBefore() method to insert the suggest_box div right before the
textbox. Before I do that, I must first find the parent of the
textbox, so that I can do a "parent.insertBefore(suggest_div,
textBox)". Now, apparently, something is happening at the line where I
do the insertBefore, because before that line, I can successfully set
the innerHTML of the suggest_box div, but after that line, it throws
the error when I try to. Ok, so the code (with some testing lines)
looks like the following:

[------------------------------------------------------------------------
CODE SAMPLE 1

1 var suggest_div = document.createElement('div');
2 suggest_div.id = 'suggest_box';
3
4 var textBox = document.getElementById(input_box_id);
5 var parent = textBox.parentNode;
6
7 suggest_div.innerHTML = 'test before'; //this line works.
8 alert(parent.innerHTML);
9 parent.insertBefore(suggest_div, textBox); //apparently something
happens here so that...
10 suggest_div.innerHTML = 'test after'; //this line does *not* work
(throws "Unknown runtime error").
-------------------------------------------------------------------------]

Another clue I can give you is that if I change the actual page html a
little bit, then it does work. I'll give you a case in which it does
not work and a case in which it does. Using the following html, the
code does NOT work ("Unknown runtime error" thrown on line 10 in CODE
SAMPLE 1):

[-------------------------------------------------------------------------
CODE SAMPLE 2

1 <body>
2 some text.

3 <p>
4 <input name="q" type="text" id="q" size="50">
5 </p>
6
7 aaa
8
9 </body>
--------------------------------------------------------------------------]

But, using the following html (adding a paragraph within the paragraph
that the textbox is in), it DOES work:

[--------------------------------------------------------------------------
CODE SAMPLE 3

1 <body>
2 some text.
3
4 <p>
5 <p>asdf</p>
6 <input name="q" type="text" id="q" size="50">
7 </p>
8
9 aaa
10
11 </body>
---------------------------------------------------------------------------]

But note also that while this works, the alert(parent.innerHTML) on
line 8 in CODE SAMPLE 1 shows that the innerHTML of the textbox's
parent node is:

[-------------------------------------
some text.
<P>
<P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
<P></P>aaa
-----------------------------------------]

This would mean that the parent node is, in fact, the body tag node,
but that's not true (the parent node of the textbox should be its
surrounding paragraph). In fact, it's technically improper to nest a
paragraph within a paragraph anyway, but apparently, this works in IE
(by the way, it still works in the other browsers, too). One final
note is that the code also works in IE if I surround the textbox in a
div. Sorry for the long post, and thanks for the help so far -
hopefully someone has some insight into this javascript stuff and IE's
quirkiness (or my bad programming). Thanks!

Joel

.