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

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