Эта страница создана, чтобы собрать информацию и фичи работы с innerHTML в одном месте. Если Вы вдруг найдете еще интересный хинт --- напишите на iliakan сабака gmail.com и я обязательно его сюда включу.
Свойство innerHTML устанавливает или получает всю разметку и содержание внутри данного элемента.
Например,var contents = elem.innerHTML elem.innerHTML = '<p>test!</p>'
Свойство innerHTML можно использовать для очистки всего элемента.
div.innerHTML = ''Однако, в браузере Internet Explorer можно натолкнуться на подводный камень. При очистке div таким образом, в нем при определенных обстоятельствах (например, просмотр живого HTML) остается . Это, скорее всего, баг, встречается в IE6, IE7. Чтобы с этим никогда не встречаться - очищайте элемент через DOM, функцией типа
function destroyChildren(node) { while (node.firstChild) node.removeChild(node.firstChild); }
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.
elem.innerHTML += '<div>test' elem.innerHTML += ' me ' elem.innerHTML += '</div>'Никогда не ставьте внутрь innerHTML некорректный HTML. Браузер просто не сможет его распарсить и вставить в DOM, получите непонятно что в результате.
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)