How to append html template inside a for loop in Javascript?

Question

I'm trying to dynamically create 100 li's and append a "template" of html inside of each one. On top of that, I want to dynamically increment the id="Increment" span element by 1 inside that template like... 1, 2, 3 ---> 100

Desired Effect: http://jsfiddle.net/LQp5y/
Current Work: http://jsfiddle.net/QyWS7/

HTML Markup:

    <section class="main">
        <div class="wrapper">
            <ul id="currentStore" class="row">

                <!-- HTML TEMPLATE -->

            </ul>

        </div>
    </section>

HTML Template:

    <!-- 100 li's -->
    <li>
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <span>1</span>
                </div>
                <div class="back">
                    <span>Buy</span>
                </div>
            </div>
        </div>
    </li>

Javascript (currently)

    var toAdd = document.createDocumentFragment();
    for(var i=1; i < 101; i++){
       var newLi = document.createElement('li');
       newLi.id = 'Product'+i;
       newLi.className = 'item';
       newLi.innerHTML = 'Product '+i;
       toAdd.appendChild(newLi);
    }

    document.getElementById('currentStore').appendChild(toAdd);

Can someone show me the proper way to do this? Thanks in advance!

Answer 1

You can do something like this Fiddle:

Create a function just for readability, note that \ on every row is used for removing the space between rows..

function html_template(index){
    return '<div class="flip-container" ontouchstart="this.classList.toggle(\'hover\');"> \
            <div class="flipper">  \
                <div class="front"> \
                    <span>'+index+'</span> \
                </div> \
                <div class="back"> \
                    <span>Buy</span> \
                </div> \
            </div> \
         </div>';
} 

Change your javascript into this:

var toAdd = document.createDocumentFragment();
for(var i=1; i < 101; i++){
   var newLi = document.createElement('li');
   newLi.id = 'Product'+i;
   newLi.className = 'item';
   newLi.innerHTML = html_template(i); //call the function here..
   toAdd.appendChild(newLi);
}

document.getElementById('currentStore').appendChild(toAdd);

Answer 2

var toAdd = document.createDocumentFragment();
    var i=1;
            while(i < 101){
               var newLi = document.createElement('li');
               newLi.id = 'Product'+i;
               newLi.className = 'item';
               newLi.innerHTML = '<li>
        <div class="flip-container" ontouchstart="this.classList.toggle(\'hover\');">
            <div class="flipper">
                <div class="front">
                    <span>'+i+'</span>
                </div>
                <div class="back">
                    <span>Buy</span>
                </div>
            </div>
        </div>
    </li>';   
               toAdd.appendChild(newLi);
               i++;
            }

    document.getElementById('currentStore').appendChild(toAdd);