HTML DOM textContent Property
Example
Get the text content of an element:
var x =
document.getElementById("myBtn").textContent;
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The textContent property sets or returns the text 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.
Note: This property is similar to the innerText property, however there are some differences:
- textContent returns the text content of all elements, while innerText returns the content of all elements, except for <script> and <style> elements.
- innerText will not return the text of elements that are hidden with CSS (textContent will). Try it »
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:
node.textContent
Set the text content of a node:
node.textContent = text
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. Returns null if the element is a document, a document type, or a notation. |
|---|---|
| DOM Version | Core Level 3 Node Object |
More Examples
Example
Change the textual content of a <p> element with id="demo":
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 some of the differences between innerText, innerHTML and textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Try it Yourself »
Get the content of the <p> element above with the specified properties:
innerText returns: "This element has extra spacing and
contains a span element."
innerHTML returns: "
This element has extra spacing and contains <span>a span
element</span>."
textContent returns: " This
element has extra spacing and contains a span element."
The innerText property returns just the text, without spacing and inner element tags.
The innerHTML property returns the text, including all spacing and inner element tags.
The textContent property returns the text with spacing, but without inner element tags.
