Тонкости innerHTML

innerHTML не так прост, как может показаться, и таит в себе некоторые тонкости, которые могут сбить с толку новичка, а иногда и опытного программиста.

Ознакомьтесь с ними.

Для таблиц в IE9- — innerHTML только для чтения

В Internet Explorer версии 9 и ранее, innerHTML доступно только для чтения для элементов COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

В частности, в IE9- нельзя присвоитьinnerHTMLтабличным элементам, кроме ячеек (TD/TH).

Добавление innerHTML+= осуществляет перезапись

Синтаксически, можно добавить текст к innerHTML через +=:

На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись:

1.Удаляется старое содержание

2.На его место становится новое значение innerHTML.

Так как новое значение записывается с нуля, то все изображения и другие ресурсы будут перезагружены. В примере выше вторая строчка перезагрузит smile.gif, который был до неё.

Если в chatDiv много текста, то эта перезагрузка будет очень заметна.

К счастью, есть и другие способы добавить содержимое, не использующие innerHTML.

Добавление innerHTML+= осуществляет перезапись

Синтаксически, можно добавить текст к innerHTML через +=:

chatDiv.innerHTML += "<div>Привет<img src='smile.gif'/>!</div>";

chatDiv.innerHTML += "Как дела?";

На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись:

1.Удаляется старое содержание

2.На его место становится новое значение innerHTML.

Так как новое значение записывается с нуля, то все изображения и другие ресурсы будут перезагружены. В примере выше вторая строчка перезагрузит smile.gif, который был до неё.

Если в chatDiv много текста, то эта перезагрузка будет очень заметна.

К счастью, есть и другие способы добавить содержимое, не использующие innerHTML.

Скрипты не выполняются