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

Joel Byrd wrote:
> 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.


.

Relevant Pages

  • Re: node.innerHTML = ... not working in IE
    ... > any indication of how the javascript is interacting with the HTML. ... >> place the suggest_box div node right next to the textbox so ... > opening P tag encountered within a P element will imply that P element's ...
    (comp.lang.javascript)
  • Re: JSTL forEach
    ... <html xmlns="http://www.w3.org/1999/xhtml"</a>;> ... the tag is still in the generated output. ...
    (comp.lang.java.programmer)
  • RE: looking for a popup control like in MSCRM...
    ... to dynamically show and hide a HTML tag on the page. ... I have an example where I use a <div> tag and populate its data using ... when the user clicks a selection. ...
    (microsoft.public.dotnet.framework.aspnet)
  • a:hover does not work without href attribute in ?
    ... I have already read that the HTML tag is the only tag in IE that ... In my toggle function I will set the style of the <div> to either ... I am trying to create something similar like the treeview you can find at ...
    (microsoft.public.dotnet.framework.aspnet)
  • Border Attribute on Table Webcontrol
    ... Code sample would help. ... >the aspx file), it renders in the HTML with a border ... twice in the HTML ... >tag in the browser. ...
    (microsoft.public.dotnet.framework.aspnet)