Geek Daily

Steven Levithan, of RegexPal has come up with a great function for creating and destroying elements that is blazing fast compared to innerHTML.

1000 elements… innerHTML (destroy only): 156ms innerHTML (create only): 15ms innerHTML (destroy & create): 172ms replaceHtml (destroy only): 0ms (faster) replaceHtml (create only): 15ms (~ same speed) replaceHtml (destroy & create): 15ms (11.5x faster) 15000 elements… diamond rings . innerHTML (destroy only): 14703ms innerHTML (create only): 250ms innerHTML (destroy & create): 14922ms replaceHtml (destroy only): 31ms (474.3x faster) replaceHtml (create only): 250ms (~ same speed) replaceHtml (destroy & create): 297ms (50.2x faster)

/* This is much faster than using (el.innerHTML = str) when there are manyexisting descendants, because in some browsers, innerHTML spends much longerremoving existing elements than it does creating new ones. coldwellbanker . */function replaceHtml(el, html) {        var oldEl = (typeof el === "string" ? document.getElementById(el) : el);        var newEl = document.createElement(oldEl.nodeName);        // Preserve the element's id and class (other properties are lost)        newEl.id = oldEl.id;        newEl.className = oldEl.className;        // Replace the old with the new        newEl.innerHTML = html;        oldEl.parentNode.replaceChild(newEl, oldEl);        /* Since we just removed the old element from the DOM, return a reference        to the new element, which can be used to restore variable references. */        return newEl;};