Efficient way of populating 300+ DIVs with HTML data from a JSON callback?
<p>I have a script that takes 18 seconds to complete because it's populating about 300 DIVs with HTML data. Code below:</p>

<p>HTML:</p>

<pre><code>    &lt;div id="window"&gt;
        &lt;div id="wall"&gt;
            &lt;div class="module"&gt;
                &lt;div&gt;
                    &lt;div class="face front"&gt;&lt;/div&gt;
                    &lt;div class="face back"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>for (i = 0; i &lt; numModules-1; ++ i)
{
    var $mod = $('.module:eq(0)').clone();

    modLeft += modSize;
    if (modLeft + modSize &gt; $('#wall').width())
    {
        modLeft = 0;
        modTop += modSize;
    }
    $mod.css({
        left: modLeft,
        top: modTop
    }).appendTo('#wall');
}

$.getJSON('html_server.php?callback=?', function(data) {
    var htmlCount = data.length;

    for (i = 0; i &lt; numModules /* 300 or more */; ++ i)
    {
        var pick = Math.floor(Math.random() * Math.floor(htmlCount/2)) * 2;
        var contentFront = data[pick];
        var contentBack = data[pick+1];
        var modStyle = '';
        var $mod = $('.module:eq(' + i + ')');
        var $modFront = $mod.find('.front');
        var $modBack = $mod.find('.back');

        // Set HTML content on front &amp; back of module
        $modFront.html(contentFront);
        $modBack.html(contentBack);
    }
});
</code></pre>

<p>If I comment out the two <code>.html()</code> calls, run time drops to about 110ms, so those are clearly the culprits. And the HTML content is not a ton, maybe 300 bytes of data at most.</p>

<p>Any advice?</p>

<p>EDIT: Added code that creates the DIVs. Perhaps I could move that within the getJSON callback and just drop in the HTML as they're created? Would that help?</p>
