innerText в JavaScript

• Текст, который видит пользователь
• Изменение текста
• innerText и textContent
• Итого

Текст, который видит пользователь

Для отображаемого элемента innerText возвращает текст так, как он виден на странице. Результат зависит от CSS.

<p class="message">Готово<span class="hidden"> (черновик)</span></p>

.hidden {
  display: none;
}

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

console.log(message.textContent); // Готово (черновик)
console.log(message.innerText); // Готово

Текст внутри элемента с классом hidden не отображается, поэтому в innerText он не попадёт.

Изменение текста

Присваивание innerText заменяет всё содержимое элемента обычным текстом.

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

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

status.innerText = 'Данные загружены';

Строка с HTML-тегами тоже будет показана как текст. Для HTML-разметки используйте innerHTML.

innerText и textContent

Для обычного чтения и изменения текста чаще используют textContent - оно не зависит от CSS. innerText выбирайте, когда нужен именно текст, который видит пользователь.

Подробно свойство textContent разобрано в уроке textContent.

Итого

innerText работает с видимым текстом элемента. Свойство полезно, когда результат должен соответствовать тому, что показано на странице. В остальных случаях используйте textContent.