HTML DOM textContent Property
Example
Get the text content of the first <button> element in the document:
The result of x will be:
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
Value | Type | Description |
---|---|---|
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 Version | Core Level 3 Node Object |
More Examples
Example
Change the textual content of a <p> element with id="myP":
Example
Get all the textual content of an <ul> element with id="myList":
The value of x will be:
Example
This example demonstrates the differences between the textContent and innerHTML property:
var x = document.getElementById("myList").textContent;
document.getElementById("demo").innerHTML = x;
}
function getHTML() {
var x = document.getElementById("myList").innerHTML;
document.getElementById("demo").innerHTML = x;
}