Изменить текст с помощью JS

JavaScript предоставляет несколько способов для изменения текста на HTML страницах. Давайте рассмотрим разные примеры.

Вариант 1

Тег с текстом:

html<p id="elem">aaa</p>

Можно поменять текст с помощью свойства textContent:

javascriptlet elem = document.querySelector('#elem');
elem.textContent = 'xxx';

Вариант 2

Тег с текстом:

html<p id="elem">aaa</p>

Чтобы применились теги, нужно использовать свойство innerHTML:

javascriptlet elem = document.querySelector('#elem');
elem.innerHTML = '<b>xxx</b>';

Вариант 3

Тег с текстом из атрибута:

html<input id="elem" value="aaa">

Меняем текст инпута через изменение значения атрибута:

javascriptlet elem = document.querySelector('#elem');
elem.value = 'xxx';

Вариант 4

Тег textarea:

html<textarea>aaa</textarea>

Это тег особенный - его текст пишется внутри тегов, но чтобы изменить его текст, нужно обращаться к свойству value. Сделаем это:

javascriptlet elem = document.querySelector('#elem');
elem.value = 'xxx';