innerHTML.md

innerHTML: содержимое элемента

Свойство 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.