.innerText

The innerText property allows reading or setting the text content of an element. When reading text from an element, a string containing the text content of all nested child elements is returned. Only the content of elements hidden via CSS will not be read, as well as the content of the <script> and <style> tags.

The property textContent has similar functionality, but it returns the content of all child elements, even those that are hidden:

        
          
          <form>  <label for='name'>Name</label>  <input type="text" id="name">  <button type="submit" id="submit">Submit</button></form>
          <form>
  <label for='name'>Name</label>
  <input type="text" id="name">
  <button type="submit" id="submit">Submit</button>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const form = document.querySelector('form')const button = document.getElementById('submit')console.log(form.innerText)// "NameSubmit"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)
// "NameSubmit"

button.innerText = 'Done!'
console.log(button)
// <button type="submit" id="submit">Done</button>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Reading and changing text content is a quite common task. innerText allows reading the content of an element and its descendants, but with a few exceptions:

• The content of <script> and <style> tags is not read;
• The content of hidden elements is not read.

The property can only change the text content of an element. If you try to assign a string with HTML, it will be inserted as text and will not turn into real DOM elements. To make HTML work in a string, use innerHTML.

The innerText property works both as a getter and a setter — accessing the property will return the text content of elements and its descendants, while setting a new value will change all text content of the element.

For example, we want to change the text in a block after the loading is complete:

        
          
          <div id="loading-status">  Loading...</div>
          <div id="loading-status">
  Loading...
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const statusElement = document.getElementById('loading-status')statusElement.innerText = 'Data loaded!'
          const statusElement = document.getElementById('loading-status')

statusElement.innerText = 'Data loaded!'

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As a result, the following HTML will be displayed in the browser:

        
          
          <div id="loading-status">  Data loaded!</div>
          <div id="loading-status">
  Data loaded!
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Suppose that in the loading status block there was also an element displaying a loader icon.

        
          
          <div id="loading-status">  <div class="fancy-loader"></div>  Loading....</div>
          <div id="loading-status">
  <div class="fancy-loader"></div>
  Loading....
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Setting a new value in innerText will completely remove all previous content and overwrite it with the new text.

        
          
          const statusElement = document.getElementById('loading-status')statusElement.innerText = 'Error occurred!'
          const statusElement = document.getElementById('loading-status')

statusElement.innerText = 'Error occurred!'

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

After running the code, only the text will remain inside the block:

        
          
          <div id="loading-status">  Error occurred!</div>
          <div id="loading-status">
  Error occurred!
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy