Joel said:
Hey, guys - I've actually gotten even closer to solving
the problem,
And you would get closer still if you posted a working test case that
demonstrated the problem instead of incomplete fragments of code without
any indication of how the javascript is interacting with the HTML.
.... 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.
So why not set the inner HTML before you insert the node (or use W3C DOM
node creation/manipulation methods to create the contents of the DIV)?
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>
The HTML P element is not allowed to contain block level elements, and
DIV is a block level element. As a browser should not let you insert a
DIV as a child of a P element it is not that surprising if things stop
working properly when you attempt to do so.
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.
4 <p>
5 <p>asdf</p>
6 <input name="q" type="text" id="q" size="50">
7 </p>
The HTML P element is not allowed to contain block level elements, and
it is a block level element itself so it cannot contain a P element. The
P element also has an optional closing tag, which may be implied by the
context of its use. As a P element may not contain a P element an
opening P tag encountered within a P element will imply that P element's
(optional) closing tag.
Thus the HTML rules imply a closing P tag just following the first
opening P tag above. The INPUT is the child of the BODY element and the
two P elements are its preceding siblings.
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
Yes, that is what you would expect, except for the P element after the
INPUT, but that is just a manifestation of error-correction in response
to encountering an unopened P closing tag.
-----------------------------------------]
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).
No, that is true and the mark-up you wrote is asking for the INPUT to be
outside of any P elements and a child of the BODY (and it is).
In fact, it's technically improper to nest a
paragraph within a paragraph anyway,
Yes it is, and since the closing P tag is optional it is actually
impossible in HTML as any opening P tag implies the closing of the
already open one.
but apparently, this works in IE
Isn't your entire problem that IE doesn't work here?
(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.
DIV elements are allowed to contain block level elements (including DIV
and P).
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!
I think you would find the task more productive if you only attempted to
create validly structured DOMs, then the browsers don't have an excuse
for complaining.
Richard.