Comparing innerHTML and innerText

by Josh Leverington

HTML

<p>I discovered that an element's <code>innerText</code> reflects any <code>text-transform</code> applied, while <code>innerHTML</code> does not (in Chrome):</p>

<p>An element with <code>text-transform:uppercase</code>: <span id="text">

            <marquee>Hello, World.
            
                    </marquee>
            
            </span></p>
<hr>
<p>
    <label for="innerHTML"><code>innerHTML</code>:</label>
    <output id="innerHTML"></output>
</p>
<p>
    <label for="innerText"><code>innerText</code>:</label>
    <output id="innerText"></output>
</p>

CSS

span {
    text-transform: uppercase;
}
p {
    margin-top:0.5em;
    margin-bottom:0.5em;
}

JavaScript

var el = document.getElementById('text');
var start=performance.now();

for (var idx=1; idx<10001; idx++) {
	if (el.textContent=="") {
  	el.textContent="<marquee>Josh</marquee>";
  } else {
  	el.textContent="";
  }
}

alert(performance.now()-start);