Optimizing javascript/jquery code for HTML creation with JSON
don't even really need jQuery for this task

here's one way to rework this script:

example jsfiddle

var domStructure = "";
    jsonObj = {
    "products": [
    {
        "ImageName": "product1.png",
        "Description": "Yummy choco"
    },
    {
        "ImageName": "product2.png",
        "Description": "candy villa"
    },
    {
        "ImageName": "product3.png",
        "Description": "vanilla icecream"
    }],
};

function getTableRow(img, desc) {
    return '\
        &lt;tr&gt;\
            &lt;td&gt;\
                &lt;img src="' + img + '"&gt;\
            &lt;/td&gt;\
            &lt;td&gt;' + desc + '&lt;/td&gt;\
        &lt;/tr&gt;';
}

for(var key in jsonObj.products) {
    domStructure += getTableRow(jsonObj.products[key].ImageName, jsonObj.products[key].Description);
}

document.getElementById('tableProducts').getElementsByTagName('tbody')[0].innerHTML = domStructure;


or if you keep jQuery method to set the table row markup use $('#tableProducts tbody') instead of $('#tableProducts').find('tbody'), no need to have jQuery fetch the first element then find the second vs letting it works it magic on one selector. it's about the same speed on the various selectors according to this jsperf.

Tests the following html setters:


$('#tableProducts tbody').html(domStructure);
$('#tableProducts').find('tbody').html(domStructure);
$('#tableProducts').children('tbody').html(domStructure);
document.getElementById('tableProducts').getElementsByTagName('tbody')[0].innerHTML = domStructure;


in the results the pure JS method jumps ahead on Firefox 9.0.1 and Safari 5.1.2