What is html text content?

What is html text content?
Element Object

Example

Get the text content of the first <button> element in the document:

var x = document.getElementsByTagName("BUTTON")[0].textContent;

The result of x will be:

Try it yourself

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The textContent property sets or returns the textual content of the specified node, and all its descendants.

If you set the textContent property, any child nodes are removed and replaced by a single Text node containing the specified string.

Tip: Sometimes this property can be used instead of the nodeValue property, but remember that this property returns the text of all child nodes as well.

Tip: To set or return the HTML content of an element, use the innerHTML property.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
textContent 1.0 9.0 Yes Yes Yes

Syntax

Return the text content of a node:

Set the text content of a node:

Property Values

ValueTypeDescription
text String Specifies the text content of the specified node

Technical Details

Return Value:A String, representing the text of the node and all its descendants
DOM VersionCore Level 3 Node Object

What is html text content?

More Examples

Example

Change the textual content of a <p> element with id="myP":

document.getElementById("demo").textContent = "Paragraph changed!";

Try it yourself »


Example

Get all the textual content of an <ul> element with id="myList":

var x = document.getElementById("myList").textContent;

The value of x will be:

Coffee Tea

Try it yourself »


Example

This example demonstrates the differences between the textContent and innerHTML property:

function getText() {
    var x = document.getElementById("myList").textContent;
    document.getElementById("demo").innerHTML = x;
}

function getHTML() {
    var x = document.getElementById("myList").innerHTML;
    document.getElementById("demo").innerHTML = x;
}

Try it yourself »


What is html text content?
Element Object

Overview

The textContent is the DOM property that is used to set text content for the HTML element or get the text content written inside that element.

If you set the text using textContent for an element, then the other child elements will be removed and only this text will be added in that element. This means that it will override the element content.

Code

Let’s use textContent on an element to get its text.

Code explanation

  • In line # 5: We have a <P> element with id elem. Inside this paragraph tag, we write some text.

  • In line # 7: We have written a button tag having a function change(). This function will be called when the user clicks the button.

  • In line # 8: Added another button with setText function, to set the text content in the p element.

  • From lines # 10-14: We have written the JavaScript code in the script tag. We have defined the function change() which will be called when the user clicks the button from the HTML page.

  • In line # 12: In function change(), we will get the <p> element using document.getElementById() and passing the id elem.

  • In line # 13: We will apply the property textContent on the element object and store its output in a variable.

  • In line # 13: Print the value returned by the property textContent using console.log().

  • In line # 16: The setText() function to set new text content in the element.

  • In line # 17: We will get the <p> element using document.getElementById() and passing the id elem.

  • In line # 18: Applying textContent on the p element and assigning new text content to it.

Output

When we click the GET Text button the console prints the exact text value which is in the <p> paragraph tag. And when SET button is clicked new text is added to it.

RELATED TAGS

dom

textcontent

communitycreator

What is the text content?

Textual content comes in many forms, including. semantically in paragraphs, headings, lists and tables; visually in images, infographics and fliers and. programmatically in alternative text, closed captions and transcriptions.

How do I get text content in HTML?

Use the textContent property to get the text of an html element, e.g. const text = box. textContent . The textContent property returns the text content of the element and its descendants. If the element is empty, an empty string is returned.

What is text content in JS?

The textContent is the DOM property that is used to set text content for the HTML element or get the text content written inside that element. If you set the text using textContent for an element, then the other child elements will be removed and only this text will be added in that element.

How do you write text in HTML?

HTML contains several elements for defining text with a special meaning..
<b> - Bold text..
<strong> - Important text..
<i> - Italic text..
<em> - Emphasized text..
<mark> - Marked text..
<small> - Smaller text..
<del> - Deleted text..
<ins> - Inserted text..

What is Property text content?

The textContent property sets or returns the text content of the specified node, and all its descendants.

What is the difference between HTML and innerText?

The only difference between innerText and innerHTML is that: innerText return HTML element (entire code) as a string and display HTML element on the screen (as HTML code), while innerHTML return only text content of the HTML element. Look at the example below to understand better. Run the code below.