.innerText

Читаем весь текст во вложенных элементах или записываем свой.

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

Кратко

Секция статьи "Кратко"

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

Аналогичной функциональностью обладает свойство 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!'console.log(button)// <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!'
console.log(button)
// <button type="submit" id="submit">Done</button>

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

Как понять

Секция статьи "Как понять"

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

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

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

Как пишется

Секция статьи "Как пишется"

Свойство 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>

        
        
          
        
      

Установка нового значения в 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>