[jQuery] Re: Using append() - each element or string of HTML?

[Michael Geary]

You will get the fastest load time by building an HTML string and inserting
it. In a test case I wrote for the jQuery Cookbook, I got a *60X* faster
load time with a 1000-row table by using an HTML string instead of building
up the table with jQuery's DOM functions. You won't see that dramatic an
improvement in a more typical widget, but it can still be a big speedup.

Some specifics:

* Make sure your HTML has a single outermost container element, not a series
of sibling elements. Wrap the whole thing in a <div> if you have to.

* Instead of concatenating a string, append to an array with arrayname[++index]
= 'stuff'; and then .join('') the array.

* If you're looping over a lengthy JSON or JavaScript array, use the
forloop from the code below instead of
$.each().

* You can attach event handlers to elements in your HTML by using jQuery
selectors after appending the HTML into the DOM. Avoid selectors that select
many multiple elements (such as one per row or column in a long table); use
event delegation instead.

Here's the test code:

function esc( text ) {
    return text
        .replace( '&', '&amp;' )
        .replace( '<', '&lt;' )
        .replace( '>', '&gt;' );
}

$(document).ready( function() {

    function fillTable( names ) {
        var e = esc;  // local reference to reduce name lookups
        var html = [], h = -1;
        html[++h] = '<table id="nameTable">';
        html[++h] = '<tbody>';
        for( var name, i = -1;  name = names[++i]; ) {
            html[++h] = '<tr><td class="name">';
            html[++h] =     e(name.first);
            html[++h] =     ' ';
            html[++h] =     e(name.last);
            html[++h] = '</td><td class="address">';
            html[++h] =     e(name.street);
            html[++h] =     '<br />';
            html[++h] =     e(name.city);
            html[++h] =     ', ';
            html[++h] =     e(name.state);
            html[++h] =     ' ';
            html[++h] =     e(name.zip);
            html[++h] = '</td></tr>';
        }
        html[++h] = '</tbody>';
        html[++h] = '</table>';

        $('#container')[0].innerHTML = html.join('');
    }

    $.getJSON( 'names/names-1000.json', function( json ) {
        fillTable( json.names );
    });
});

The names-1000.json file loaded by the code looks like this:

{
    "names": [
        {
            "first": "Belva",
            "last": "Clegg",
            "street": "1327 Demyan Drives",
            "city": "Ellerson Rapids",
            "state": "ST",
            "zip": "13030"
        },
        {
            "first": "Suzette",
            "last": "Grundy",
            "street": "6473 Beazer Dale",
            "city": "Ahern",
            "state": "LE",
            "zip": "91670"
        },
        // ...997 more of these...
        {
            "first": "Libby",
            "last": "Gladfelter",
            "street": "6942 Duplantis Parkway",
            "city": "Anguiano Ridge",
            "state": "NO",
            "zip": "50045"
        }
    ]
}

See the book when it comes out for more details :-) or fire away here with
any questions.

-Mike

On Fri, Sep 18, 2009 at 7:40 AM, Kaitlyn <kaitlyn2...@gmail.com> wrote:

>
> Just wondering from an efficiency standpoint:
>
> I am building a widget out of javascript and so there is a lot of
> HTML. Am I better off creating it as a string, then append() it into
> the document, or should I build the widget itself using append() and
> other related helper functions?
>