HTML - DOM textContent Property

Quiz

The HTML DOM textContent property is used to access and update the text content of an HTML element and all its child elements as a single string.

When you accseed the textContent, it returns the combined text of the element and its descendants, excluding any HTML tags.

Syntax

Following is the syntax of the HTML DOM textContent (to access the content) property −

element.textContent;

To update the existing HTML content with new content, use the following syntax −

element.textContent = new_text;

Where the new_text, is a text to update the element's content.

Parameters

This property does not accept any parameter.

Return Value

The textContent property returns a string value that holds the all the text found within an HTML element and all its child elements. If no text found, it returns 'null'.

Example 1: Updating Text Content

The following is the basic example of the HTML DOM textContent property. It updates the text content of <h1> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM textContent</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<h2>textContent Property</h2>
<p>Click the below button to change its text content..</p>
<h1 id="myHeading">Hello from Us</h1>
<button onclick="updateText()">Change Text</button>
<script>
   function updateText() {
      // Get the element by its ID
      var Us=document.getElementById('myHeading');
      // Update the text content
      Us.textContent='Welcome to Our Website';
   }
</script>
</body>
</html>

The above program update the text content of "h1" element, when the button is clicked.

Example 2: Displaying Combined Text Content

Following is another example of the HTML DOM textContent property. We use this property to access and display the combined text content of the<div> element, including all its child elements −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM textContent</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<p>It displays the text content of div element.</p>
<div id="myDiv">
<p>This is a <span>paragraph</span> with 
<strong>strong</strong> emphasis.
</p>
</div>
<button onclick="displayText()">Display Text Content</button>
<p id="textContentDisplay"></p>
<script>
   function displayText() { 
      var ele=document.getElementById('myDiv');
      // Retrieve and display the text content
      var textcon = ele.textContent;
      document.getElementById('textContentDisplay').textContent = 'Text Content: ' + textcon;
   }
</script>
</body>
</html>

Example 3: Checking for Empty Content

In the example below, the textContent property is used to check the text content of the <div> element. If no text content is found, it displays "No text content found. Otherwise, it displays the accessible text content −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM textContent</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<p>Checking for empty content..</p>
<div id="myDiv"></div>
<button onclick="checkContent()">Check Content</button>
<p id="contentStatus"></p>
<script>
   function checkContent() { 
      var ele=document.getElementById('myDiv');
      
      // Check if text content exists
      var textContent = ele.textContent;
      if (textContent === '') {
         document.getElementById
         ('contentStatus').textContent = 'No text content found.';
      } else {
        document.getElementById
        ('contentStatus').textContent = 'Text Content: ' + textContent;
      }
   }
</script>
</body>
</html>

Supported Browsers

Property
textContent	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page