Иногда при разработке веб страницы возникает необходимость изменение фрагмента текста на другой без перезагрузки страницы. В JavaScript существуют четыре основные свойства innerText, outerText, innerHTML и outerHTML, которые и позволяют динамически изменять текстовое содержимое объекта. Например, данные свойства используются во многих чатах, что бы избегать постоянной перезагрузки фрейма с сообщениями.

innerText – содержит только текст контейнера и ничего более.

outerText, outerHTML – содержит не только текст, но и включает непосредственно описание контейнера.

innerHTML – содержит весь текст с тегами, включенным в контейнер.

Для наглядного примера приведем небольшой фрагмент кода:

< div id=”test”><>This is a simple HTML content< /b>< /div>

Здесь текст, заключенный в контейнер div без тега < b> возвращается в свойстве innerText, текст вместе с тегом < b> - innerHTML.
Значения данных свойств можно не только прочитать, но и изменять:

< span id="counter">Нажатий = 0< /span>
< form>
< input type="button" value="Счетчик" onclick="updateMessage()">
< /form>
< script language = "JavaScript">

var hits = 0;

function updateMessage() {
hits += 1;
document.getElementById("counter").innerHTML =
"Нажатий = " + hits;
}

< /script>

При нажатии на кнопку содержимое контейнера span будет изменятся.