textContent & innerText demo

to show the difference between textContent and innerText.

by YiFei Du

HTML

<h2>visual:</h2>
<div id="demo">here's some text that contains <span class="uppercase">uppercased words.</span><span class="hidden">you can't see me.</span></div>

<h2>innerText:</h2>
<div id="innerText"></div>

<h2>textContent:</h2>
<div id="textContent"></div>

CSS

.hidden {
  display: none;
}

.uppercase {
  text-transform: uppercase;
}

JavaScript

var demo = document.getElementById('demo');
var innerText = document.getElementById('innerText');
var textContent = document.getElementById('textContent');
innerText.innerHTML = demo.innerText;
textContent.innerHTML = demo.textContent;