document.getElementById не удается для DIV с одним тегом

Question

У меня есть 2 DIV на странице HTML:

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

У меня есть скрипт, который запускает веб-сервис и заполняет его данными:

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

Вот моя проблема:

1. Приведенный выше код прекрасно работает в IE 8
2. Приведенный выше код иногда работает, а иногда нет в Chrome 3.
3. В FF 3.51 работает только первая строка. После тестирования с FireBug я вижу, что выражение document.getElementById("divResult") оценивается как null.

После долгих проб и ошибок я обнаружил, что если я изменю код HTML на:

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

Все работает хорошо во всех 3 браузерах.

Мои вопросы:

1. Почему я должен закрывать DIV, чтобы они были доступны?
2. Это JavaScript или ошибка FF?
3. Существуют ли какие-либо другие элементы HTML, которые станут недоступными, если они не будут закрыты должным образом?

Спасибо!

Answer 1

<div/> - это способ закрытия тегов в XML. <div></div> - это HTML (и XML).

Какой DOCTYPE вы используете?

С С. Рекомендации по совместимости HTML в XHTML ™ 1.0 Расширяемый язык разметки гипертекста (второе издание) :

С.3. Минимизация элементов и содержание пустых элементов

Учитывая пустой экземпляр элемента, модель содержимого которого не является ПУСТО (например, пустой заголовок или пункт) не используйте свернутый форма (например, используйте <p> </p>, а не <p />).

Answer 2

Какой DOCTYPE вы используете? DOCTYPE определяет, как браузер должен интерпретировать HTML.

Браузер использует заголовок 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 />. В противном случае вам необходимо явно закрыть его.