Close your tags
This has bitten me a couple times now and I feel like an idiot every time it happens. If you don't close your tags properly and you need to access elements via the DOM, expect trouble in Internet Explorer.
I do most of my testing in Firefox which has been very forgiving and as a result, I'll get to the point where when I switch to test in IE, the browser throws an error and worse, won't even render the page (ah, reminds me of the Netscape 4 days!).
Let's take a look at an example:
<div><span id="test">test</a></div> <div id="hell">My content!</div>
In this very straightforward example, I have a span with an ID that I need to target and then I might have some content after that to target as well. But you'll notice that I accidentally tried to close my
SPAN with an
A. Now let's see what happens when I make some changes to the DOM:
var el = document.getElementById('test'); el.innerHTML = 'new test'; var el = document.getElementById('hell'); alert(el); // null?
I grab my test element and change the text contained within. However, because of the invalid HTML, changing the contents obliterates everything else on the page.
Lesson learned; make sure your HTML is valid!