String Templates vs JQuery DOM Creation (v4)

Revision 4 of this benchmark created by Arlo Carreon on November 27, 2012

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>

Setup

var hotelObj = {id:123,name:"Hilton",img:"http://www.logostage.com/logos/Hilton.jpg"};
    
    window.buildHotelHTML = function(hotelData){
        var str = '<div class="hotelInfo" id="'+hotelData.id+'">'+
      '<span class="hotelName">'+hotelData.name+'</span>'+
      '<img class="hotelImage" src="'+hotelData.img+'" />'+
      '</div>';
    
        return jQuery(str);
    }
        
    window.buildHotelJQuery = function(hotelData) {
        //master row
        var row = jQuery('<div>')
                .attr('id', hotelData.id)
                .addClass('hotelInfo');
    
        // add span
        row.append( 
                jQuery('<span>')
                        .addClass('hotelName')
                        .html(hotelData.name)
        );
    
        // add img
        row.append( 
                jQuery('<img>')
                        .addClass('hotelImage')
                        .attr('src',hotelData.img)
        );
        
        return row;
    }

Test runner

// Build Template. Returns a jQuery object.
var str = buildHotelHTML(hotelObj);

// Build Template. Returns a jQuery object.
var div = buildHotelJQuery(hotelObj);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 4: published by Arlo Carreon on November 27, 2012