Javascript DOM HTML Node innerText Property compare to textContent

Introduction

The textContent returns the text content of all elements.

The innerText returns the content of all elements, except for <script> and <style> elements.

The innerText does not return the text of elements that are hidden with CSS.

The textContent does return the text of elements that are hidden with CSS.

View in separate window 

<!DOCTYPE html>
<html>
<body>
<p id="demo">This p element contains a 
    <span style="display:none">hidden span element</span> and a 
    <span>visible span element</span>.
</p>/*from  w  w  w.j ava 2s  .com*/

<button onclick="getTextContent()">Get textContent</button>
<button onclick="getInnerText()">Get innerText</button>
<p id="demo"></p>

<script>
function getTextContent() {
  document.getElementById("demo").innerHTML = document.getElementById("demo").textContent;
}

function getInnerText() {
  document.getElementById("demo").innerHTML = document.getElementById("demo").innerText;
}
</script>

</body>
</html>



PreviousNext

Related