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!

Bob van Luijt · Accepted Answer · 2014-08-02 07:50:38Z

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);

answered Aug 2, 2014 at 7:50

Bob van Luijt

7,67815 gold badges64 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oneezy Over a year ago

Thanks dude! got it working like a charm... jsfiddle.net/LQp5y ,,, oddly though, I had to remove all of the white space for the html template to get it work. Not really sure why? maybe a jsfiddle bug or something?

Oneezy Over a year ago

I can use jquery... but I'm starting to focus more on pure javascript because i'm developing for mobile these days. and jquery is a performance killer! but thanks a lot for your help! I'm mainly a "UI Guy"... im still learning this coding stuff'

Bla... · Accepted Answer · 2014-08-02 08:08:32Z

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);

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related