Optimizing javascript/jquery code for HTML creation with JSON I use the following code to populate my HTML with JSON. The problem is that I'm afraid this code will be inefficient if the number of records that I get from the service call are large (200 or more).

Are there ways I can change my code to make sure this won't be an issue?  Or is my code fine as it stands?

&lt;html&gt;
&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script&gt;
    var jsonObj = {
        "products": [
            {
                "ImageName": "product1.png",
                "Description": "Yummy choco"
            },
            {
                "ImageName": "product2.png",
                "Description": "candy villa"
            },
            {
                "ImageName": "product3.png",
                "Description": "vanilla icecream"
            }
        ],
    }
    $(document).ready(function() {
        for(var key = 0; key &lt; jsonObj.products.length - 1; key++) {

            var domStructure ='\
                &lt;tr&gt;\
                    &lt;td&gt;\
                        &lt;img src="' + jsonObj.products[key].ImageName + '"&gt;\
                    &lt;/td&gt;\
                    &lt;td&gt;'
                        + jsonObj.products[key].Description +
                    '&lt;/td&gt;\
                &lt;/tr&gt;';

            $('#tableProducts').find('tbody').append(domStructure);
        }
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table id="tableProducts"&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
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