Strange IE6 behavior with getElementById

Should be simple...

[ratman7]

Hi all,

While doing a very simple text population of a <p> element using getElementById, I noticed something. I'm populating a <p> element called 'walkdir'.

Here's the js that WORKS:

function addInfo() {
document.getElementById("walkdir").innerHTML ='<b>From Grosvenor Square:&nbsp;</b>More text here';
}

Here's the js that DOES NOT WORK IN IE6. Only difference is the added <p> tag at the beginning of the string.

function addInfo() {
document.getElementById("walkdir").innerHTML ='<p><b>From Grosvenor Square:&nbsp;</b>More text here</p>';
}

Both of the above code samples work in FF and Safari. However, when the <p> tag is in the innerHTML string, the onclick won't fire in IE6. Anyone know what might cause this?

[daveVk]

The <p> element except in xhtml does not require a closing tag, I guess IE assumes they will not be nested and interprets <p><p> as <p></p><p> or similar.

[ratman7]

The <p> element except in xhtml does not require a closing tag, I guess IE assumes they will not be nested and interprets <p><p> as <p></p><p> or similar.

I have a closing </p> tag though. The <b> tag doesn't seem to cause a problem. It seems to me that it shouldn't matter since it is in a text string.

[daveVk]

in this case

document.getElementById("walkdir").innerHTML ='<p><b>From Grosvenor Square:&nbsp;</b>More text here</p>';
}

the outerHTML for "walkdir" is something like

<p id="walkdir"><p><b>From Grosvenor Square:&nbsp;</b>More text here</p></p>

On seeing the red bit, I guess IE may assume you meant <p id="walkdir"></p><p>, a reasonable interpretation if no nesting of p tags is assumed.

[ratman7]

On seeing the red bit, I guess IE may assume you meant <p id="walkdir"></p><p>, a reasonable interpretation if no nesting of p tags is assumed.

daveVk, thanks for your input. This may very well be it. But if I may ask, any idea of why would this cause the onclick not to fire? Is it because, based on your theory, that the browser doesn't know where to insert the text? At this point it is not really important, but since we're talking about it...

[daveVk]

You did not say what the onclick was attached to, assuming it is on walkdir then it would only fire on the text(area?) between the start and end tag, and there is none. If you wish to investigate further try

function addInfo() {
document.getElementById("walkdir").innerHTML ='JUNK<p><b>From Grosvenor Square:&nbsp;</b>More text here</p>';
}

and see if it fires on 'JUNK'.

You could also try specifihng a color on walkdir and seeing how far color extends.

[ratman7]

You did not say what the onclick was attached to, assuming it is on walkdir then it would only fire on the text(area?) between the start and end tag, and there is none. If you wish to investigate further try

function addInfo() {
document.getElementById("walkdir").innerHTML ='JUNK<p><b>From Grosvenor Square:&nbsp;</b>More text here</p>';
}

and see if it fires on 'JUNK'.

You guessed correctly -- the onclick is attached to:

<p id="walkdir"></p>

I tried it with JUNK, as you suggested, and it doesn't fire.

However, when I changed the target element "walkdir" from a <p> to a <div>, it works. So there's our answer: IE6 doesn't like nested <p> tags when using getElementByID.

Thanks again for your help.

[daveVk]

I tried it with JUNK, as you suggested, and it doesn't fire.

I expected it might had fired on JUNK, Oh well.

Avoid nesting p tags, seems a good principle.