Append Text Node vs. innerHTML (plain Text only) (v2)

Revision 2 of this benchmark created on

Description

There's lots of tests of innerHTML vs appendChild stuff around but I want to test this only for plain text, no HTML.

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var elem = document.body.appendChild(document.createElement("div"));
var str = "<p>Tim<strong>says <em>hello</em> "

+ "to</strong> Kez and <em>Dan</em></p>"

elem.innerHTML = str;
document.body.removeChild(elem);
ready
text node
var elem = document.body.appendChild(document.createElement("div"));
var p = document.createElement("p")

var em_1 = document.createElement("em")

var em_2 = document.createElement("em")

var strong = document.createElement("strong")



p.appendChild(document.createTextNode("Tim"))

strong.appendChild(document.createTextNode("says"))

em_1.appendChild(document.createTextNode("hello"))

strong.appendChild(em_1)

strong.appendChild(document.createTextNode("to"))

p.appendChild(strong)

p.appendChild(document.createTextNode("Kez and"))

em_2.appendChild(document.createTextNode("Dan"))

p.appendChild(em_2)

elem.appendChild(p)
document.body.removeChild(elem);
ready

Revisions

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