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

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

Вариант 1

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

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

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

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

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

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

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

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

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

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

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

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

<textarea>aaa</textarea>

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

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