/ ↲
    Расширенный поиск

    JavaScript

    .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>

    Читайте также