add events to new elements, getElementsByClassName vs createElement

Benchmark created on

Preparation HTML

<div id="appendee">
<div class='eventer'></div>
<div class='eventer'></div>
<div class='eventer'></div>
</div>

Setup

var appendee = document.getElementById('appendee');
    var ev = function() {
      var test;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
createElement
for (i = 0, j = 10; i < j; i++) {
  var e = document.createElement('div');
  e.className = 'eventer';
  appendee.appendChild(e);
  e.addEventListener('onclick', ev, false);
}
ready
innerHTML, getElementsByClassName
appendee.innerHTML = appendee + "<div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div><div class='eventer'></div>";
var eles = document.getElementsByClassName('eventer');
for (var i = 0, j = eles.length; i < j; i++) eles[i].onclick = ev;
ready
createElement, getElementsByClassName
for (i = 0, j = 10; i < j; i++) {
  var e = document.createElement('div');
  e.className = 'eventer';
  appendee.appendChild(e);
}
var eles = document.getElementsByClassName('eventer');
for (var i = 0, j = eles.length; i < j; i++) eles[i].onclick = ev;
ready

Revisions

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