Efficiently cloning html in jQuery: javascript template vs. append html, which has better performance?

Question

What is the best/optimal way to change the html of a lightbox?

Say I have 20 table rows, and I want to pop them up in a fancybox. The choices are:

Load the detailed view in an iframe as pure html (1 http request per popup)
Load the details as JSON, and pass them into an inline javascript template to create the popup
Load the details, and traverse the DOM of the popup and place the JSON values in the right spots (e.g. $("#popup .title").text(model.title);)
Load the details as hidden inline server-generated HTML, and clone the html into the popup $("#popup").html($(".details", row).clone()).

The added HTML is what you'd find in a profile (links, description, logo, address, etc.), so it's not a ton but not a single line either.

Are there any standards here on what's the fastest in terms of javascript?

Alex · Accepted Answer · 2011-04-14 18:35:14Z

1

Option #2. No competition efficiency-wise.

answered Apr 14, 2011 at 18:35

Alex

66.4k49 gold badges154 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I think option 4 would compete quite well if the popup is shown often enough.