Question

I have a web app where we would be inserting hundreds of elements into the DOM

Essentially, I’m doing

 $('#some_element').html('<lots of html here>'); 

repeatedly. In some cases I might need to do $('#some_element').appendTo('more html');

From previous experience inserting html text using the append or setting the innerHTML of an element is slow.

I’ve heard that you can increase performance by first putting the elements in a DOM fragment and then moving its location to inside the element you want.

The performance of this is key. Do you guys have any tips or suggestions on maximizing the performance? Any hacks I can do to make this fast?

Edit: as mentioned in a comment: The app involves a real-time stream of various data, so it needs to be able to constantly add new DOM elements to represent the new data. (This might also lead to another problem of having too many DOM elements, so would need to elements that are too old).

Answer 1

Just don’t do html() (or use its native cousin innerHTML = …) repeatedly. Pack your HTML in one variable and do html() only once (or as few times as possible). E.g.:

var buf = [], i = 0;

buf[i++] = "<p>";               /* or use buf.push(string) */
buf[i++] = "some text";
buf[i++] = "some other text";
buf[i++] = "</p>";

element.innerHTML = buf.join("");

Also see the Quirksmode entry on innerHTML and the W3C DOM vs. innerHTML page.

Update: Yesterday I found the amazing article When innerHTML isn’t Fast Enough by Steven Levithan about his function replaceHtml, which is even faster than using just innerHTML, because it removes the DOM nodes that are to be replaced using standard DOM manipulation before innerHTML is used:

function replaceHtml(el, html) {
    var oldEl = typeof el === "string" ? document.getElementById(el) : el;
    /*@cc_on // Pure innerHTML is slightly faster in IE
        oldEl.innerHTML = html;
        return oldEl;
    @*/
    var newEl = oldEl.cloneNode(false);
    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;
};