.textContent

The textContent property allows you to read or set the textual content of an element. Accessing the property will return a string consisting of the textual content of all nested elements, even if they are hidden with CSS and not visible on the screen.

An analogous functionality, but with some limitations, is provided by the innerText. It works similarly but does not include hidden elements.

        
          
          <section>  <h1>Header</h1>  <p>And a paragraph of useful text.</p></section>
          <section>
  <h1>Header</h1>

  <p>And a paragraph of useful text.</p>
</section>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Accessing the textContent property of the <section> tag:

        
          
          const section = document.querySelector('section')console.log(section.textContent)// Header and a paragraph of useful textconst heading = document.querySelector('h1')heading.textContent = 'New header'// Result: <h1>New header</h1>
          const section = document.querySelector('section')
console.log(section.textContent)
// Header and a paragraph of useful text

const heading = document.querySelector('h1')
heading.textContent = 'New header'
// Result: <h1>New header</h1>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

To read and change the textual content, the browser provides the properties innerText and textContent. Value assignment works identically for both. The value returned when reading the properties differs. textContent returns a string with the content of all nested descendants, regardless of whether they are hidden or not. innerText, on the other hand, returns the content of only visible elements.

The property can only change the textual content of the element. If a string containing HTML is assigned, it will be inserted as plain text and will not be converted into a real DOM element. To insert HTML using a string, the property innerHTML will suffice.

Accessing the textContent property will return the textual content of an element. If there are child nodes within the element, the result will be the concatenation of textContent calls for all these nodes.

        
          
          <div>  <h1>Header</h1>  <p>Paragraph</p>  <p>Second paragraph</p></div>
          <div>
  <h1>Header</h1>
  <p>Paragraph</p>
  <p>Second paragraph</p>
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const element = document.querySelector('div')console.log(element.textContent)// "HeaderParagraphSecond paragraph".// Since the words do not contain spaces,// there will be none in the final string either
          const element = document.querySelector('div')

console.log(element.textContent)
// "HeaderParagraphSecond paragraph".
// Since the words do not contain spaces,
// there will be none in the final string either

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

To change the text in an element, assign a new value to the textContent property.

        
          
          <div>  <h1>Header</h1>  <p>Paragraph.</p>  <p>Second paragraph.</p></div>
          <div>
  <h1>Header</h1>
  <p>Paragraph.</p>
  <p>Second paragraph.</p>
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const element = document.querySelector('div')element.textContent = 'I will be the only text here'
          const element = document.querySelector('div')
element.textContent = 'I will be the only text here'

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

No more icons inside, just new text:

        
          
          <div>  I will be the only text here</div>
          <div>
  I will be the only text here
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy