Свойство innerHTML

Эта страница создана, чтобы собрать информацию и фичи работы с innerHTML в одном месте. Если Вы вдруг найдете еще интересный хинт --- напишите на iliakan сабака gmail.com и я обязательно его сюда включу.

Свойство innerHTML устанавливает или получает всю разметку и содержание внутри данного элемента.

Например,

var contents = elem.innerHTML
elem.innerHTML = '<p>test!</p>'

Очистка при помощи innerHTML. Фича 1.

Свойство innerHTML можно использовать для очистки всего элемента.

div.innerHTML = ''

Однако, в браузере Internet Explorer можно натолкнуться на подводный камень. При очистке div таким образом, в нем при определенных обстоятельствах (например, просмотр живого HTML) остается  . Это, скорее всего, баг, встречается в IE6, IE7. Чтобы с этим никогда не встречаться - очищайте элемент через DOM, функцией типа

function destroyChildren(node)
{
  while (node.firstChild)
      node.removeChild(node.firstChild);
}

Добавление текста при помощи innerHTML. Фича 2.

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

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

Но при этом все окошко чата "мигает", и все картинки перегружаются. Это происходит потому, что chatDiv.innerHTML += '...' можно еще иначе записать как

chatDiv.innerHTML = chatDiv.innerHTML + '...'

Т.е, свойство innerHTML узла очищается, а затем - целиком переустанавливается. Отсюда и мигание и перезагрузка картинок. Поэтому использовать innerHTML надо аккуратно, в данном случае, например, целесообразно добавить новое сообщение через DOM:

var newDiv = document.createElement('div')

newDiv.innerHTML = 'Привет <img src='smile.gif'/> !'
chatDiv.appendChild(newDiv)

Вообще, свойство innerHTML хоть и не входит в стандарт, но поддерживается почти всеми браузерами, и работает гораздо быстрее операций с DOM.

Структура работы innerHTML. Фича 3

Присвоение elem.innerHTML=data работает очень просто. Строка data обрабатывается внутренним парсером браузера и заменяет текущее содержимое узла elem. Поэтому, конечно же, не будут правильно работать конструкции c битым HTML типа

elem.innerHTML += '<div>test'
elem.innerHTML += ' me '
elem.innerHTML += '</div>'

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

innerHTML в таблицах. Фича 4

Иногда люди пытаются добавлять ячейки в таблицу кодом, вроде

tableElem.getElementsByTagName('tbody')[0].innerHTML += '<tr><td>Вася</td><td>25</td></tr>'

Все работает хорошо, кроме IE, где такой код просто обламывается. Это потому, что создавать ячейки и строки таблицы через innerHTML в IE - нельзя.

Цитата из мана Microsoft..

...The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR...

Короче, говоря, используйте DOM и помните о TBODY, которое обязательно должно присутствовать в таблице. А если что - браузер его добавит.

Еще по теме: How to Build Tables Dynamically (MSDN)