javascript - document.getElementById fails for single-tag DIV - Stack Overflow

admin管理员组

文章数量:1296915

I have 2 DIVs on an HTML page:

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

I have a script that hits a web service and fills them up with data:

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

Here's my problem:

1. The above code works nicely in IE 8
2. The above code sometimes works and sometimes doesn't in Chrome 3.
3. Only the first line works in FF 3.51. Upon testing with FireBug, I can see that the expression document.getElementById("divResult") evaluates to null.

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

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

Everything works well in all 3 browsers.

My questions are:

1. Why do I have to close the DIVs in order for them to be available?
2. Is this a JavaScript thing, or an FF bug?
3. Are there any other HTML elements that will bee unavailable if they are not closed properly?

Thanks!

I have 2 DIVs on an HTML page:

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

I have a script that hits a web service and fills them up with data:

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

Here's my problem:

1. The above code works nicely in IE 8
2. The above code sometimes works and sometimes doesn't in Chrome 3.
3. Only the first line works in FF 3.51. Upon testing with FireBug, I can see that the expression document.getElementById("divResult") evaluates to null.

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

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

Everything works well in all 3 browsers.

My questions are:

1. Why do I have to close the DIVs in order for them to be available?
2. Is this a JavaScript thing, or an FF bug?
3. Are there any other HTML elements that will bee unavailable if they are not closed properly?

Thanks!

• javascript
• firefox
• html

Share Improve this question Follow asked Jul 22, 2009 at 0:14 Traveling Tech GuyTraveling Tech Guy 27.8k2525 gold badges116116 silver badges166166 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

<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 />).

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.

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 />

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.

本文标签： javascriptdocumentgetElementById fails for singletag DIVStack Overflow