What is the fastest way to build HTML from JavaScript?
<p>I am working on a website that uses infinite scroll. There is a function called <code>is_element_in_view()</code> that gets executed on these 3 events:</p>

<pre><code>scroll
load
resize
</code></pre>

<p>The function does exactly what it's called, it checks to see if an element with a loading gif image is in view and if so it fires an ajax request to get content from the server.</p>

<p>The server sends back a json object that looks like this:</p>

<pre><code>    [{
        "url": "\/embed\/182926\/some-slug",
        "thumb": "http:\/\/cdn.site.com\/91\/26\/a62c1ad74327321dab78bb194c130da5.jpg",
        "type": "video",
        "is_original": false,
        "is_prank_news": false,
        "title": "Hello World",
        "description": "\t&lt;p&gt;Enjoy this video!&lt;\/p&gt;",
        "teaser": "Click Me!",
        "finder": "Found by &lt;strong&gt;Jim&lt;\/strong&gt; yesterday",
        "likes": "2 likes",
        "ad_img": null,
        "media_stats": "&lt;div class=\"media-status\"&gt;2000 views&lt;\/div&gt;"
    },
    more objects...]
</code></pre>

<p>There's only one object in this response for clarity sake but in reality I get back 20. This is how I'm building out the html from the json data:</p>

<pre><code>$.ajax({
    url: '/some/ajax/url',
    type: 'get',
    data: 'somedata',
    dataType: 'json',
    success: function(response) {

        if(!$.isEmptyObject(response)) {

            for(var i = 0; i &lt; response.length; i++) {

                if(response[i]) {
                    var item = response[i];
                    var title = item.title.replace(/\\"/g, '"');

                    var media_label = '';                   
                    var item_description_teaser = '';
                    var likes = '';
                    var ad_image = '';
                    var media_stats = '';

                    if(item.description) {

                        // description
                        item_description_teaser = '&lt;div class="description"&gt;' + item.description.replace(/\\"/g, '"');

                        // teaser
                        item_description_teaser += (item.teaser) ? '&lt;a href="'+ item.url +'" class="teaser"&gt;'+ item.teaser.replace(/\\"/g, '"') +'&lt;img src="images/teaser-arrow.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;' : '&lt;/div&gt;';
                    }

                    // media label
                    if(item.type == 'article' &amp;&amp; item.is_prank_news || item.is_original &amp;&amp; item.is_prank_news) {
                        media_label = '&lt;span class="media-label prank-news-network"&gt;Prank&lt;/span&gt;';
                    }
                    else {
                        if(item.type == 'article') {
                            media_label = '&lt;span class="media-label article"&gt;Article&lt;/span&gt;';
                        }
                        else if(item.is_original) {
                            media_label = '&lt;span class="media-label original"&gt;Original&lt;/span&gt;';
                        }
                    }

                    // likes
                    if(!settings.hide_likes) {
                        likes = '&lt;span class="likes"&gt;' + item.likes + '&lt;/span&gt; | ';
                    }

                    // ad image
                    if(item.ad_img) {
                        ad_image = '&lt;img src="'+ item.ad_img +'" alt="" class="ad-img" /&gt;';
                    }

                    block += '&lt;article class="block"&gt;' +
                                '&lt;div class="inner-left"&gt;' +
                                    media_label +
                                    '&lt;a href="'+ item.url +'" title="" class="thumb"&gt;' +
                                        '&lt;img src="'+ item.thumb +'" alt="" width="198" height="111" /&gt;' +
                                    '&lt;/a&gt;' +
                                '&lt;/div&gt;' +
                                '&lt;div class="inner-right"&gt;' +
                                    '&lt;a href="'+ item.url +'" title="" class="title"&gt;' +
                                        title +
                                    '&lt;/a&gt;' +
                                    item_description_teaser.replace(/\\"/g, '"') +
                                    '&lt;div class="media-stats"&gt;' +
                                        likes +
                                        '&lt;span class="finder"&gt;'+ item.finder.replace(/\\"/g, '"') +'&lt;/span&gt;' +
                                    '&lt;/div&gt;' +
                                    ad_image +
                                '&lt;/div&gt;' +
                                item.media_stats +
                            '&lt;/article&gt;';

                }
            }

            $('#content').append('&lt;div class="page page-'+ page_num +'"&gt;' + block + '&lt;/div&gt;');

            // update page count
            page_num++;

            // clear previous listings
            block = '';
        }
        else {
            $('#content').append('&lt;div class="page page-1"&gt;&lt;p class="nothing-to-show"&gt;Nothing found...&lt;/p&gt;&lt;/div&gt;');
        }
    },
    error: function() {
        alert('error');
    }
});
</code></pre>

<p>As you can see I put everything in one giant string stored inside the variable <code>block</code>. I append data to this string with every loop and append it to the page outside the loop at the end.</p>

<p>I feel like there is a faster way to build html from js. I read somewhere a while ago that building giant strings like I'm doing isn't as efficient as some other method the article described that I forgot. So what's the faster way to do this?</p>
