innerHTML vs DOMParser

Benchmark created on

Setup

const escapedHTML = 'Me & You';

const toInnerText = (text) => {
  const el = document.createElement('div');
  el.innerHTML = text;
  return el.innerText;
}

const toDOMParser = (text) => {
  return (new DOMParser()).parseFromString(text, 'text/html').body.firstChild;
}

const reusableEl = document.createElement('div');
const toInnerTextCached = (text) => {
  reusableEl.innerHTML = text;
  return reusableEl.innerText;
}

const parser = new DOMParser();
const toDOMParserCached = (text) => {
  return parser.parseFromString(text, 'text/html').body.firstChild;
}

Test runner

Ready to run.

Testing in
TestOps/sec
innerText
toInnerText(escapedHTML);
ready
DOMParser
toDOMParser(escapedHTML);
ready
innerText (cached)
toInnerTextCached(escapedHTML);
ready
DOMParser (cached)
toDOMParserCached(escapedHTML);
ready

Revisions

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