Document.getElementById not working for single-disk DIV

Question

I have 2 DIVs in an HTML page:

<div id="divDebug" />
<div id="divResult" />

I have a script that gets into a web service and populates them with data:

document.getElementById("divDebug").innerHtml = rawResult;
document.getElementById("divResult").innerHtml = processResult(rawResult);

Here is my problem:

• The above code works well in IE 8
• The code above sometimes works, and sometimes not in Chrome 3.
• In FF 3.51, only the first line works. After testing with FireBug, I see that the expression document.getElementById("divResult")evaluates to null.

After much trial and error, I found out that if I changed the HTML code to:

<div id="divDebug"></div>
<div id="divResult"></div>

Everything works well in all three browsers.

My questions:

• Why should I close the divs so they are available?
• Is this a JavaScript thing or an FF bug?
• Are there any other HTML elements that will become inaccessible if they are not closed properly?

Thanks!

Answer 1

<div/> - XML- , . <div></div> - HTML ( XML).

DOCTYPE ?

C. HTML XHTML ™ 1.0 ( ):

.3.

, (, ) (, <p> </p>, <p />).

Answer 2

DOCTYPE? DOCTYPE , HTML.a >

Content-type, , . content-type - text/html, HTML, - application/xhtml + xml, XHTML. [, .]

HTML4 , DIV . , . img, br, meta, .

XHTML, , , .

: HTML/XHTML DOCTYPE, , .

Answer 3

HTML. , HTML , . IE8 , FF , , .

, HTML-, :

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

Answer 4

- HTML, XHTML. : <img /> <hr />. .