<!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. |
Share your thoughts in the comments
Please Login to comment...