Javascript innerHTML Demons

I had thought that using the property innerHTML on an HTML tag via Javascript works the same way in Internet Explorer and Mozilla browsers. As I don’t use IE now because it sucks ever since vesion 7 was released, I wasn’t aware the results vary in IE and Firefox. If my boss is not using IE, then I would never have known about this. If we want to get the contents of, say

<span id="content">This is a content</span>

we do it in Javascript via document.getElementById('content').innerHTML. If the content of span is just ordinary text, then you wouldn’t have problems in both browsers. The issue arises if your tag would contain HTML tags within them like

<span id="content"><font size="3">This is a content</font></span>

When you do document.getElementById('content').innerHTML, the results vary in

IE: <FONT size=3>This is a content</FONT>
Firefox: <span style="font-size: small;">This is a content</span>

Notice that in IE, apostrophe characters are taken out in the output string and the tag name is converted to uppercase. Firefox though, retains the same case and characters as how it was written in the HTML file. You would have to do cross browser checks in your Javascript if you want to do string manipulations in your code. Sigh, why can’t they just get along in the same page.

Related Posts Plugin for WordPress, Blogger...

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *