.textContent

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

Аналогичной функциональностью, но с некоторыми ограничениями, обладает свойство innerText. Оно работает так же, но не включает в себя скрытые элементы.

        
          
          <section>  <h1>Заголовок</h1>  <p>И параграф полезного текста.</p></section>
          <section>
  <h1>Заголовок</h1>

  <p>И параграф полезного текста.</p>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обращение к свойству textContent у тега <section>:

        
          
          const section = document.querySelector('section')console.log(section.textContent)// Заголовок и параграф полезного текстаconst heading = document.querySelector('h1')heading.textContent = 'Новый заголовок'// Результат: <h1>Новый заголовок</h1>
          const section = document.querySelector('section')
console.log(section.textContent)
// Заголовок и параграф полезного текста

const heading = document.querySelector('h1')
heading.textContent = 'Новый заголовок'
// Результат: <h1>Новый заголовок</h1>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Свойство может изменить только текстовое содержимое элемента. Если присвоить строку, содержащую HTML, то она вставится как простой текст и не превратится в реальный DOM-элемент. Для того чтобы вставлять HTML c помощью строки, подойдёт свойство innerHTML.

Обращение к свойству textContent вернёт текстовое содержимое элемента. Если внутри элемента находятся дочерние узлы, то результат будет являться конкатенацией (объединением) вызовов textContent для всех этих узлов.

        
          
          <div>  <h1>Заголовок</h1>  <p>Параграф</p>  <p>Второй параграф</p></div>
          <div>
  <h1>Заголовок</h1>
  <p>Параграф</p>
  <p>Второй параграф</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const element = document.querySelector('div')console.log(element.textContent)// "ЗаголовокПараграфВторой параграф".// Так как слова не содержат пробелов,// то и в итоговой строке их тоже не будет
          const element = document.querySelector('div')

console.log(element.textContent)
// "ЗаголовокПараграфВторой параграф".
// Так как слова не содержат пробелов,
// то и в итоговой строке их тоже не будет

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Чтобы изменить текст в элементе, присвойте новое значение свойству textContent.

        
          
          <div>  <h1>Заголовок</h1>  <p>Параграф.</p>  <p>Второй параграф.</p></div>
          <div>
  <h1>Заголовок</h1>
  <p>Параграф.</p>
  <p>Второй параграф.</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const element = document.querySelector('div')element.textContent = 'Я буду единственным текстом здесь'
          const element = document.querySelector('div')
element.textContent = 'Я буду единственным текстом здесь'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Больше никакой иконки внутри, только новый текст:

        
          
          <div>  Я буду единственным текстом здесь</div>
          <div>
  Я буду единственным текстом здесь
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать