Javascript DOM HTML Node innerText Property compare to innerHTML and textContent

Introduction

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.

This example demonstrates some of the differences between innerText, innerHTML and textContent:

View in separate window 

<!DOCTYPE html>
<html>
<body>
<p id="demo">   
       This element has extra spacing   and contains <span>a span 
       element</span>.
</p>//from   w  ww.ja  v a2  s  . c  o m

<button onclick="getInnerText()">Get innerText</button>
<button onclick="getHTML()">Get innerHTML</button>
<button onclick="getTextContent()">Get textContent</button>

<p id="demo1"></p>

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

function getHTML() {
  document.getElementById("demo1").innerHTML = document.getElementById("demo").innerHTML;
}

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

</body>
</html>



PreviousNext

Related