`.innerText`

Время чтения: меньше 5 мин

Кратко

Свойство Element.innerText позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов <script> и <style>.

Аналогичной функциональностью обладает Element.textContent, но он возвращает содержимое всех дочерних элементов, даже скрытых.

Пример

        
          
          <form>  <label for='name'>Имя</label>  <input type="text" id="name">  <button type="submit" id="submit">Submit</button></form>
          <form>
  <label for='name'>Имя</label>
  <input type="text" id="name">
  <button type="submit" id="submit">Submit</button>
</form>

        
          
          const form = document.querySelector('form')const button = document.getElementById('submit')console.log(form.innerText) // Склеит текст всех потомков и выведет "ИмяSubmit"button.innerText = 'Done!' // Изменит текст кнопки на Done// В результате будет: <button type="submit" id="submit">Done</button>
          const form = document.querySelector('form')
const button = document.getElementById('submit')

console.log(form.innerText) // Склеит текст всех потомков и выведет "ИмяSubmit"

button.innerText = 'Done!' // Изменит текст кнопки на Done
// В результате будет: <button type="submit" id="submit">Done</button>

Открыть демо в новой вкладке

Как понять

Считывание и изменение текстового содержимого – довольно распространённая задача. Element.innerText позволяет считывать содержимое элемента и всего потомков, но с несколькими исключениями:

не считывается содержимое тегов <script> и <style>
не считывается содержимое скрытых элементов

Свойство может изменять только текстовое содержимое элемента, если попытаться присвоить строку с HTML, она вставится как текст и не превратится в реальные DOM-элементы. Чтобы HTML в строке сработал, используйте Element.innerHTML.

Как пишется

Свойство Element.innerText работает и как геттер, и как сеттер — обращение к свойству вернёт текстовое содержимое элементов и его потомков, а установка нового значения изменит все текстовое содержимое элемента.

Например, мы хотим изменить текст в блоке после окончания загрузки:

        
          
          <div id="loading-status">  Loading...</div>
          <div id="loading-status">
  Loading...
</div>

        
          
          const statusElement = document.getElementById('loading-status')statusElement.innerText = 'Data loaded!'
          const statusElement = document.getElementById('loading-status')

statusElement.innerText = 'Data loaded!'

В результате в браузере будет отображаться следующий HTML:

        
          
          <div id="loading-status">  Data loaded!</div>
          <div id="loading-status">
  Data loaded!
</div>

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

        
          
          <div id="loading-status">  <div class="fancy-loader"></div>  Loading....</div>
          <div id="loading-status">
  <div class="fancy-loader"></div>
  Loading....
</div>

Установка нового значения в Element.innerText полностью удалит все предыдущее содержимое и перезапишет его новым текстом.

        
          
          const statusElement = document.getElementById('loading-status')statusElement.innerText = 'Error occurred!'
          const statusElement = document.getElementById('loading-status')

statusElement.innerText = 'Error occurred!'

        
          
          <!-- Больше никакой иконки внутри, только новый текст --><div id="loading-status">  Error occurred!</div>
          <!-- Больше никакой иконки внутри, только новый текст -->
<div id="loading-status">
  Error occurred!
</div>