CODEWITHSUNDEEP
jquery
Ben
Ben

Reputation: 62494

Most efficient method to create html in jquery?

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?

Upvotes: 3

Views: 2161

Answers (7)

John Strickler
John Strickler

Reputation: 25421

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/">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.

Upvotes: 0

calvinf
calvinf

Reputation: 3924

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

Upvotes: 1

Stephen
Stephen

Reputation: 18984

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.

Upvotes: 3

San4ez
San4ez

Reputation: 8251

Or this way:

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

Upvotes: 0

skajfes
skajfes

Reputation: 8265

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.

Upvotes: 0

Matti Virkkunen
Matti Virkkunen

Reputation: 65166

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.

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382909

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

Upvotes: 1

Related Questions