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

Richard,

Your comments were extremely helpful and in fact got at the core of my
problem. I did not realize that a p element was not allowed to contain
a block level element (but it is somewhat intuitive). Now, my problem
is solved and I've definately learned some things from it - thanks a
lot!

Joel



Richard Cornford wrote:
> 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
    ... > place the suggest_box div node right next to the textbox so ... So why not set the inner HTML before you insert the node (or use W3C DOM ... > thrown on line 10 in CODE SAMPLE 1): ... P element also has an optional closing tag, which may be implied by the ...
    (comp.lang.javascript)
  • Re: Call HTML control in code behind (ASP.net 2.0)
    ... > Since asp:textbox do not function well for some scenerio, ... > after checking the textbox value using javascript, ... I want the solution of HTML control not ...
    (microsoft.public.dotnet.languages.vb)
  • 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)