HTML - DOM innerText Property

Quiz

The HTML DOM innerText property is used to retrieve (read) or change (update) the visible text content directly within an HTML element on a webpage.

When you access element.innerText, it retrieves the current content of that element. If you assign new content to it (e.g., element.innerText = "new_content"), it updates the existing content with the new HTML.

The "innerText" property is similar to the innerHTML property, but there are some minor differences between them. The "innerText" property retrieves or sets the visible text content of an element, excluding HTML tags, while "innerHTML" retrieves or sets the HTML markup inside an element, including tags.See more

The following interactive example demonstrate the usage of the innerText method for different scenarios −

HTML DOM innerText

Welcome to Tutorialspoint

You are at the right place to learn...

Syntax

Following is the syntax of the HTML DOM innerText (to read the visible content) property −

element.innerText

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

element.innerText = text

Where the "text", is the text content of the element.

Parameters

This property does not accept any parameter.

Return Value

This property returns a string containing the visible text content of an element, excluding text within hidden elements like <script> or <style>.

Example 1: Reading Current Text Content

The following is a basic example of the HTML DOM innerText property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerText</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the button to display the current paragraph text.</p>
<p id="myParagraph">Welcome to Tutorialspoint</p>
<button onclick="displayText()">Display Text Content</button>
<script>
   function displayText() {
      const paragraph = document.getElementById('myParagraph');
      alert("The text of this paragraph is: " + paragraph.innerText);
   }
</script>
</body>
</html>

The above program read the visible content of the paragraph ("p") element.

Example 2: Changing (updating) Text Content

Following is another example of the HTML DOM innerText property. We use this property is used to update the existing visible content of the "div" element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the innerText of p element</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to change (update) the Paragraph text.</p>
<p id="myParagraph">Initial text content.</p>
<button onclick="changeText()">Change Text</button>
<script>
   function changeText() {
      const paragraph = document.getElementById('myParagraph');
      paragraph.innerText = 'Updated text using innerText property!';
   }
</script>
</body>
</html>

The above program updates (changes) the content of the "p" element.

Example 3: Manipulating Nested Elements

This example shows the manipulation of the nested elements using the innerText property.

Initially, it displays the "parent text" and "nested text" in a nested manner, but clicking the button, changes the text of the parent<div>to "New parent text," while the text of the nested <div> remains the same −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerText</title>
<style>
   #parent{
       border: 1px solid #000;
       padding: 10px;
   }
   #child{
       margin-top: 10px;
       border: 1px dashed #000;
       padding: 5px;
   }
   button{
       padding: 8px 12px;
       margin: 5px 0px;
   }
</style>
</head>
<body>
<p>Click the below button to change "Parent text" to 'New Parent Text'.</p>
<div id="parent">
Parent text
<div id="child">
Nested text
</div>
</div>
<button onclick="changeNestedText()">Change Parent Text</button>
<script>
   function changeNestedText() {
      const parentElement = document.getElementById('parent');
      parentElement.innerText = 'New parent text';
   }
</script>
</body>
</html>

Supported Browsers

Property
innerText	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page