document.getElementById fails for single-tag DIV

Answer 1

<div/> is the XML way of closing tags, basically. <div></div> is HTML (and XML).

What DOCTYPE are you using?

From C. HTML Compatibility Guidelines in XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition):

C.3. Element Minimization and Empty Element Content

Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).

Answer 2

What's the DOCTYPE that you are using? DOCTYPE defines how the browser should interpret the HTML.

Browser uses Content-type header to decide how to parse the content being served. If content-type is text/html, it will be parsed as HTML and if content type is application/xhtml+xml, it will be parsed as XHTML. [Thanks Miles for the correction.]

HTML4 spec requires that you close the DIV tag with proper end tag. There are certain tags e.g. img, br, meta, which could be self-closing.

If you are using XHTML, you can self close the tag if it's empty otherwise closing tag is required.

Another tip: Always validate your HTML/XHTML against the DOCTYPE you have used, you can eliminate these kind of bugs.

Answer 3

Good rule of thumb - if you can leave off the closing tag in HTML, you can self-close in XHTML. Examples: <img /> and <hr />. Otherwise, you need to explicitly close it.

Answer 4

You're writing non-standard HTML. When you do that, browsers can, and will, effectively rewrite your HTML to something that makes sense. IE8 rewrote your incorrectly self-closed tag one way, FF chose another, but the important point is that both had to guess.

The correct remedy is to follow the HTML standard which only allows you to self-close a handful of elements:

<area />
<base />
<basefont />
<col />
<br />
<hr />
<input />
<img />
<link />
<meta />
<param />