innerHTML vs cloneNode (v358)

Revision 358 of this benchmark created by Andoitz on

Preparation HTML

<div style="width:1px;height:1px;overflow:hidden;">
<div id='box1'></div>
<div id='box2'></div>
<div id='box3'></div>
</div>

Setup

var testPattern = '<div>hello<div style="background-color: #000000;">ttt</div></div>';
  var i, testString;
  for (i = 0; i < 1000; i++) {
    testString += testPattern;
  }
  
  function replaceHtml(el,html) {
  	var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
  	var newEl = oldEl.cloneNode(true);
  	newEl.innerHTML = html;
  	oldEl.parentNode.replaceChild(newEl, oldEl);
  }

Test runner

Ready to run.

Testing in
TestOps/sec
replaceHtml
replaceHtml('box1',testPattern);
ready
innerHTML
document.getElementByID("box1").innerHTML = testPattern;
ready

Revisions

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