Javascript DOM HTML Node textContent Property compare to innerText

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 will not return the text of elements that are hidden with CSS.

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

View in separate window 

<!DOCTYPE html>
<html>
<body>
<h3>Differences between innerText and textContent.</h3>

<p id="demo">This p element contains a <span style="display:none">hidden span element</span> and a <span>visible span element</span>.</p>

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

<script>
function getTextContent() {//from  w  w  w  .j  a v a2  s . c  om
  document.getElementById("demo1").innerHTML = document.getElementById("demo").textContent;
}

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

</body>
</html>



PreviousNext

Related