textContent в JavaScript

• Получение и изменение текста
• Вложенные элементы
• Итого

Получение и изменение текста

Свойство textContent возвращает текст элемента и его вложенных элементов. Через него же можно заменить содержимое обычной строкой.

<p class="status">Загрузка...</p>

const status = document.querySelector('.status');

console.log(status.textContent); // Загрузка...
status.textContent = 'Данные загружены';

После присваивания в элементе будет показан новый текст.

Вложенные элементы

Присваивание textContent заменяет всё содержимое элемента, включая вложенные теги.

<p class="message">Статус: <strong>готов</strong></p>

const message = document.querySelector('.message');

message.textContent = 'Статус: отправлен';

После этого strong внутри message больше не будет.

textContent воспринимает строку как текст, а не как HTML. Например, ‘<strong>Готово</strong>’ будет показано со скобками, а не станет тегом. Для вывода обычной строки, в том числе пользовательских данных, используйте textContent.

Если нужен именно видимый пользователю текст, читайте в уроке innerText. О том, как изменить только значение внутри фразы и работать с полями ввода, читайте в уроке «Изменение текста элемента».

Итого

textContent используют для чтения и изменения обычного текста элемента. При присваивании свойство заменяет всё его содержимое, а строку с тегами выводит как текст.