HTML - DOM innerText Property

---

---

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 −

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

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 −

Click the below button to change (update) the Paragraph text.
Initial text content.
Change Text

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