createTextNode vs. textContent vs. innerHTML vs. innerText

Benchmark created by Tom Doan on

Description

Comparing four different ways to insert a non-breaking space. (Note that innerText is not supported in Firefox.)

Preparation HTML

Output: "<span id="output"></span>"
<script>
  var out = document.getElementById('output');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
createTextNode
out.textContent = '';
out.appendChild(document.createTextNode('\u00a0'));
ready
textContent
out.textContent = '';
out.textContent = '\u00a0';
ready
innerHTML
out.textContent = '';
out.innerHTML = '\u00a0';
ready
innerText
out.textContent = '';
out.innerText = '\u00a0';
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Tom Doan on