innerHTML vs createTextNode (v5)

Revision 5 of this benchmark created on

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML (0 links)
const root = document.createElement('div');
root.innerHTML = `text without links`;

console.log("t1", root.innerHTML);
ready
createTextNode (0 links)
const root = document.createElement('div');
root.appendChild(document.createTextNode(`text without links`));

console.log("t2", root.innerHTML);
ready
innerHTML (1 link)
const root = document.createElement('div');
root.innerHTML = `text with a <a href="https://example.com/">link</a>`;

console.log("t3", root.innerHTML);
ready
createTextNode (1 link)
const root = document.createElement('div');
root.appendChild(document.createTextNode(`text with a `));
const anchor = document.createElement('a');
anchor.setAttribute("href", "https://example.com/");
anchor.appendChild(document.createTextNode(`link`));
root.appendChild(anchor);

console.log("t4", root.innerHTML);
ready

Revisions

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