Annoyance with space after <span> tags in Internet Explorer.

Question

<div onclick="alert(this.innerHTML);">

<p>Since you saw <span title=":P" class="emoticon tongue"></span> if <strong>you read</strong> the intro post <span title=":D" class="emoticon laugh"></span><span title=":D" class="emoticon laugh"></span> a</p>

</div>

I have this markup, its fine and behaves as expected in all other browsers (as usual) but in IE, when I alert it, it shows me markup with out the space before the "if" and the last "a", I do some manipulation using this html with jquery and its becoming a headache that the manipulated string always has those spaces absent, even though if I view source in IE the spaces are present (which it why it displays correctly) but never returns me the actual html on alert or after manipulation

Thank you

EDIT: Basically I am facing a problem in this use case, what you see is the HTML of a post that can be edited the emotion tongue etc are spans that make emotions appear on my site using a background property in CSS, there is an edit button under the post, when you click EDIT .. it puts this text in a contenteditable="true" div and replaces the spans with the ":P" and ":D" textual equivalents.. but in IE i am returned this ":Pif" and in other browsers.. as expected and intended .. this ":P if". << note the space.

Answer 1

have you tried using   instead of spaces like this:

<div onclick="alert(this.innerHTML);">

<p>Since you saw <span title=":P" class="emoticon tongue"></span>&nbsp;if <strong>you read</strong> the intro post <span title=":D" class="emoticon laugh"></span><span title=":D" class="emoticon laugh"></span>&nbsp;a</p>

</div>

Answer 2

In both cases, you have a space, a span (or two) with no inner text, and another space. The two spaces together should merge into one space, as whitespace, after the first, is not significant in HTML. If you want a space the is always a space, use   (Or go with the modern approach and use CSS to adjust the size of your spans.

Answer 3

The reason you are getting this is because you have confused .innerHTML to mean the original source code of the div - .innerHTML contains the HTML, not the source code text. They can be two different things. In this case, the extra space has no meaning for an HTML parser - the parser is free to discard the meaningless extra space.

For another example look at the capitalization - you may not have noticed it, but your alert dialog probably shows the tag names capitalized in IE.

And before you start off on the "IE must suck" track of blame, I suggest you try the following in FireFox:

<div onclick="alert(this.innerHTML);">

<p>Since you saw <span title=":P" class="emoticon tongue"></span> if <strong>you read</strong> the intro post <span title=":D" class="emoticon laugh"></span><span title=":D" class="emoticon laugh"></span><u<i> a</p>

</div>

I've included a broken tag near the a: <u<i>

In IE, Safari, Opera and Chrome the browser correctly interprets this as a bad tag name (it is neither an underline or an italic tag). However the Mozilla engine has had a long running bug where it not only sees an underline tag (it should not, since the < is technically part of the name, and there is no valid tag called "u<"), is also interprets an italic tag in there. Run the code in Mozilla/FireFox and your alert dialog will contain this string: <u ><i> a</i></u>. You certainly didn't write that, did you? However this is the correct behavoir; innerHTML returns the HTML the browser has derived, not the source code. Since Mozilla derived those tags, they are properly returned when you ask for them.

EDIT: to clarify my terminology, I'm using "HTML" to refer to the HTML DOM tree (of course an HTML parser is not required to create a DOM tree, but it will at some point convert the text into a less ambiguous, parsed form that I am calling HTML), and "Source Code" to refer to the HTML source code text that is parsed to create it.