DOM building using DocumentFragment I want to build the markup below by iterating on an array of objects.  The structure of the object is also listed below.  I need some tips on how to make it clean.

Markup I want to build:    

&lt;!--the markup I want to build--&gt;
&lt;div class="pull-left col-xs-4"&gt;
    &lt;div class="thumbnail"&gt;
        &lt;div class="caption"&gt;
            &lt;h5&gt;Crowne Plaza Hotel&lt;/h5&gt;
        &lt;/div&gt;
        &lt;img class="img-responsive" src="img/crown-plaza.jpg" alt="Crowne Plaza Hotel"&gt;
        &lt;div class="caption"&gt;
            &lt;h3 class="pull-right"&gt;
                &lt;small&gt;
                    &lt;s&gt;S$ 275&lt;/s&gt;
                &lt;/small&gt;S$ 275&lt;/h3&gt;
            &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


JavaScript:

//the object structure of each data
{
    name: "Hotel A",
    loc: "Prontera Rd",
    dist: 9,
    img: "img/rendezvous-hotel.jpg",
    price: 350,
    deal_price: 350,
    currency: "S$",
    star_rating: 4
}

function constructDOMFragment(data) {
    var fragment = document.createDocumentFragment();
    for (var i = data.length - 1; i &gt;= 0; i--)(function(obj) {

        var div_container = document.createElement("div");
        div_container.className = "pull-left col-xs-4";

        var div_thumbnail = document.createElement("div");
        div_thumbnail.className = "thumbnail";

        div_container.appendChild(div_thumbnail);

        var div_caption_top = document.createElement("div");
        div_caption_top.className = "caption";

        var h5 = document.createElement("h5");
        h5["innerHTML" || "textContent"] = obj.name;
        div_caption_top.appendChild(h5);
        div_thumbnail.appendChild(div_caption_top);

        var img = document.createElement("img");
        img.className = "img-responsive";
        img.src = obj.img;
        img.alt = obj.name;

        div_thumbnail.appendChild(img);

        var div_caption_bottom = document.createElement("div");
        div_caption_bottom.className = "caption";


        var h3_deal_price = document.createElement("h3");
        h3_deal_price.className = "pull-right";
        if (obj.price !== undefined &amp;&amp; obj.price &amp;&amp; obj.price != obj.deal_price) {
            var price = document.createElement("small");
            var strikethrough = document.createElement("s");
            strikethrough["innerHTML" || "textContent"] = obj.currency + " " + obj.price;
            price.appendChild(strikethrough);
            h3_deal_price.appendChild(price);
        }
        h3_deal_price.appendChild(document.createTextNode("  " + obj.currency + " " + obj.price));

        div_caption_bottom.appendChild(h3_deal_price);

        var clearfix = document.createElement("div");
        clearfix.className = "clearfix";
        div_caption_bottom.appendChild(clearfix);

        div_thumbnail.appendChild(div_caption_bottom);
        fragment.appendChild(div_container);

    })(data[i]);

    var clearfix = document.createElement("div");
    clearfix.className = "clearfix";
    fragment.appendChild(clearfix);

    return fragment;
};
There are several problems in your code:



What is r.price?



h5["innerHTML" || "textContent"] = obj.name makes no sense. You could just a well write h5["innerHTML"] = obj.name. Your code won't test if such properties exist.

Even h5["innerHTML"] || h5["textContent"] won't do much good, since that just returns the value of either property, so you can't use it to set it. 

You'd need to use something like 

if (typeof h5.innerHTML == "undefined") { // no need for bracket notation here any more
  h5.innerHTML = obj.name
} else {
  h5.textContent = obj.name
}


However even that isn't very nice, since the element may have innerHTML set even if the browser doesn't actually use it. 

Also innerHTML and textContent are "incompatible" to each other. For example, if you would assign the string "&lt;i&gt;Example&lt;/i&gt;" to them, then using innerHTML will parse the HTML and display the text Example (in italic), while textContent will display the literal text &lt;i&gt;Example&lt;/i&gt;.

The cleanest way would be to create and append explicit text nodes.



I don't see any benefit in using a function as the body of the for loop.



Generally building a fragment like this isn't very practical. For one it's terribly slow. For the other it's very difficult to read and makes changing the HTML structure a real bother, especially since it contains presentational information, such as Bootstraps grid classes and the clearfix elements (which IMHO are usually unnecessary nowadays).

Consider using a template mechanic of some kind. Either build something simple yourself, or use one of the plenty JavaScript template libraries, such as mustache.