IE javascript bug finally found!

WARNING: this post won't make much sense to you if you don't know javascript and html. Feel free to skip it and meet back with me for my next post which I promise will be much less geeky. In fact, I would assume it will be about iOS4 which I am poised to download quite soon...

This has been driving me crazy for a few days. I've been struggling with a javascript error that was keeping a very simple piece of code from working in IE. It worked in Safari, Chrome, Firefox, and Opera, but would give an error in IE.

The code was super simple. In the webpage I have a paragraph with id='inserttext':

<p id="inserttext">

Then in the script, I added the text, along with markup for the text to be a heading. But this line would give an error:

document.getElementById('inserttext').innerHTML = "<h2>
Here is the text</h2>"

I went down so many wrong paths trying to fix this. I read all about how IE confuses name and id, but the name "inserttext" was used only in this one spot in my page, so that wasn't it. Saw a post about this same problem but in his case the id was 'description'. Again, a case of mixing up a name somewhere else with the paragraph id.

I thought that it was a timing problem, that the paragraph didn't exist at the time the script ran. So I added a statement to only execute the code if the paragraph existed:

if (document.getElementbyID('inserttext')){
document.getElementById('inserttext').innerHTML = "<h2>
Here is the text</h2>"
}

Here was my first clue: the inner statment still gave an error. That means the paragraph was successfully found, but there was something wrong with the inner statement.

I commented out the whole section. The next section did the same thing with a different paragraph, this time assigning the innerHTML to a variable in the script. This one worked fine.

Uncommenting the section, I finally decided to remove the markup. AND IT WORKED. It was the <h2> tag that IE was choking on. Such a simple solution, I simply added CSS to style the paragraph instead of using <h2>.

Problem solved.