1. textContent :
This property is used to set or return the text value of the selected node and all its descendants. While setting the textContent property, any child nodes are removed. It is replaced by a single Text node containing the specified string.
Syntax :
- To set the text of node –
node.textContent = text
- To return the text of node –
node.textContent
2. innerText :
This property also sets or returns the text value of the selected node and all its descendants. However, there are some differences shown using the following example.
<!DOCTYPE html> <html>
<head>
<title>
Differences between innerText and textContent.
</title>
</head>
<body>
<h3>Differences between innerText & textContent.</h3>
<p id="demo"> This element has extra spacing and contains
<span>a span element</span>.</p>
<button onclick="getInnerText()">Get innerText</button>
<button onclick="getTextContent()">Get textContent</button>
<p id="demo"></p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
</body>
</html>
|
[/tabbyending]
Output :
Before clicking any buttons :
After clicking on innerText button :
After clicking on textContent button :
The innerText property returns the text, without spacing and the textContent property returns the text along with spacing.
Other differences between innerText :
|
Sl No. |
innerText |
textContent |
|---|---|---|
| 1. | It returns the visible text contained in a node. | It returns the full text. |
| 2. | It is much more performance-heavy, as it requires layout information to return the result. | It is not so much performance-heavy, as it doesn’t requires layout information to return the result. |
| 3. | It is defined only for HTMLElement objects. | It is defined for all Node objects. |
| 4. | This property is not supported in IE9 and earlier. | This property is not supported in Internet Explorer 8 and earlier. |