Most efficient method to create html in jquery?

Question

I'm trying to think of the most efficient way to add html to my page. I currently have:

jQuery("<tbody><tr class='section toggle-minus'><td colspan='3' class='toggle' id='make-"+id+"'>"+name+" (0)</td></tr></tbody>");

And then I add that to the page.... is there a more efficient way or is this pretty much it?

Answer 1

Other than what you are doing, there is also html() method.

Answer 2

That is likely the most efficient way in terms of speed. jQuery lets the browser parse the HTML and that's fast... faster than DOM manipulation, in many cases.

Personally I don't like making HTML strings and having to deal with escaping user input and whatnot, so I often define this little extra method:

$.fn.create = function(name) {
    return $(document.createElement(name));
};

You can use that combined with other jQuery functions to create any HTML structure

$.create("tbody").append(
    $.create("tr").attr("class": "section toggle-minus").append(
        $.create("td") /* et cetera */
    )
)

It's a bit of a mouthful though, one day I'll surely implement a better element building method for jQuery.

Answer 3

I would say that this is pretty much it. As I understand it, it is just important that you minimize the number of DOM insertions.

Answer 4

Or this way:

$([
'<tbody>',
    '<tr class="section toggle-minus">',
        '<td colspan="3" class="toggle" id="make-"', id, '">', name,' (0)','</td>',
    '</tr>',
'</tbody>'
].join(''));

Answer 5

Actually, the fasted way to create an element with jQuery is to use this:

$(document.createElement('tbody'));

Creating an element like this $('<tbody></tbody>'), is a bit slower than the above method.

Here is the most optimized way to do what you are doing:

UPDATED

jQuery(document.createElement('tbody')).append(
    jQuery(document.createElement('tr')).append(
        jQuery(document.createElement('td'))
            .addClass('toggle')
            .html([name," (0)"].join(''))
            .attr({
                'colspan' : '3',
                'id' : ['make-',id].join('')
            })
    ).addClass('section toggle-minus')
);

The very last thing you would do is append it to the document. The joins are used because ie6/7 garbage collection stinks when concatenating.

Answer 6

There are several jQuery templating plugins. I'd recommend looking at the following:

• mustache.js
• handlebars.js
• jquery-tmpl

Answer 7

If you are going to be repeatedly inserting HTML (such as through a loop) then I'd use a jQuery templating plug-in. I prefer the one that Microsoft made from John Resig's original design. It gets the job done. Read about it here.

It works like this...

Define a template in the section of your page.

<script id="myTemplate" type="text/html">
  <div>
    <h3>${headerText}</h3>
    <p>${someText}</p>
    <a href="${linkHref}">Click Me</a>
  </div>
</script>

Here some test data:

var testData = 
{
  headerText: 'Hello World',
  someText: 'A long random paragraph about nothing, or Lorem Ipsum.. yadayaya',
  href: 'http://www.stackoverflow.com/'
}

Then you can use the template anytime and as much as you want:

$('#myTemplate').tmpl(testData).appendTo('body');

Results in:

<div>
  <h3>Hello World</h3>
  <p>A long random paragraph about nothing, or Lorem Ipsum.. yadayaya</p>
  <a href="http://www.stackoverflow.com/"&gt;Click Me</a>
</div>

You can create as complex structures as you want. It's very easy to read and maintain.

Enjoy :)

Then you can use this repeatedly.