Which jQuery operation is faster for 20+ elements?

Code 1:

$("#page").replaceWith(html_string)

Code 2:

$("#page .title").text("Hello")

I am starting to use Mustache.js, jQuery.tmpl, and Coffeekup and am starting to wonder what best practices are in terms of re-rendering html elements.

Say I have a list of items, like here, and I want to just change the titles/tags/images with JSON via a templating framework. Should I:

• Replace the whole list itself with a new html string?
• Replace each list item with a new html string?
• Replace just the text/attributes in every single element with the json values?

I know the last case will require traversing the dom a lot more, but I'm not sure if that's m开发者_运维知识库ore of a performance hit than replacing the whole html tree. How does this work?

I tend to think that you shouldn't destroy DOM elements just to recreate them immediately.

The last case doesn't really add any DOM traversal, but it does modify the DOM several times instead of just once.

If you're concerned about performance you can always use the detach()^[docs] method to remove the elements from the page, do your manipulation on its content, then append them.

    // reference the container
var ul = $('#myul');

    // select and detach the children
var lis = ul.children().detach();

    // do your manipulation
lis.each(function() {
    // update the text
});

    // reinsert them
ul.append(lis);

The .detach() will keep the elements and all their handlers/data intact while you manipulate them.

A jQuerytmpl template is a compiled javascript function, which should be even faster then rendering html strings.

Imagine the browser. It reads first all the html and parses it then. With a jquery template you go one step further and provide the browser the already parsed object.

Compiled templates like jQuery.tmpl are the fastest way i think, faster than any html, if coded good.

Waiting for critics SO! :)

no different for Code 1:

$("#page").replaceWith(html_string)

Code 2:

$("#page .title").text("Hello")