Тонкости 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 через +=:

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

chatDiv.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.

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

Если в innerHTML есть тег script — он не будет выполнен

<div id="my"></div>

<script>

var elem = document.getElementById('my');

elem.innerHTML = 'ТЕСТ<script>alert(1);</scr'+'ipt>';

</script>

В примере закрывающий тег </scr'+'ipt> разбит на две строки, т.к. иначе браузер подумает, что это конец скрипта. Вставленный скрипт не выполнится.

Исключение — IE<10, в нем вставляемый скрипт выполняются, если у него есть атрибут defer (это нестандартная возможность

<div id="my"></div>

<script>

var elem = document.getElementById('my');

elem.innerHTML = 'Для IE<script defer>alert(1);</scr'+'ipt>';

</script>

IE<9 обрезает style и script в начале innerHTML

Если скрипт или стиль находятся в начале innerHTML, то старый IE уберет их. Визуальный эффект очевиден — стили не применятся.

Открыть пример (в IE9 будет режим IE8).

Смотрите также innerHTML на MSDN на эту тему.

OuterHtml: html узла целиком

Свойство outerHTML содержит HTML узла целиком.

Оно поддерживается всеми браузерами давно, кроме Firefox — в нём начиная с версии 11.

Пример чтения outerHTML

<div id="hi">Привет <b>Мир</b></div>

<script>

var div = document.getElementById('hi');

alert(div.outerHTML); // <div>Привет <b>Мир</b></div>

</script>

Можно и записать outerHTML, однако при этом новый текст будет вставлен вместо узла, а сама переменная не изменится.

Это отлично видно на примере

<div id="hi">Привет <b>Мир</b></div>

<script>

var div = document.getElementById('hi');

div.outerHTML = '<p>Новый HTML!</p>';

alert(div.tagName); // DIV

alert(div.innerHTML); // Привет <b>Мир</b>

</script>

Как видно из примера выше, при замене div.outerHTML в переменной div остаётся старый узел, который теперь оторван от документа, но полностью «жизнеспособен».