[Moo] new Element() performance in IE7

[Kai Gülzau]

I have to update huge tables (>1000 entries) with the result of an
ajaj response.

In my first try i used the mootools api:

for (var c=$('tbody'), i=0; i<2000; i++) {
  c.grab(
    new Element('tr').grab(
      new Element('td', {html: '<b>text</b>'+i})
    )
  );
}

This loop finished in 2200ms(!) in IE7 and 400ms in FF3.

Second try was a DOM only loop:

var row, crow = document.createElement('tr');
var cell, ccell = document.createElement('td');
var c = document.getElementById('tbody');
for (var i=0; i<2000; i++) {
  (cell = ccell.cloneNode(false)).innerHTML = '<b>text</b>'+i;
  (row = crow.cloneNode(false)).appendChild(cell);
  c.appendChild(row);
}

Loop finished in 450ms in IE7 and 200ms in FF3.
In this case "new Element()" is more than 4 times slower than pure DOM
in IE7!

Is there a trick to do such things the mooish way without such a
performance penalty?

I have set up a demo page: http://wfxde1.appspot.com/


Regards,

Kai Gülzau