如何添加HTML模板内的JavaScript中循环？ [英] How to append html template inside a for loop in Javascript?

问题描述

我试图动态地创建100李时珍并追加每一个内部一个HTML的模板。最重要的是，我要通过动态1递增该模板像... 1，2里面的ID =增量span元素，3 ---> 100

预期的效果： http://jsfiddle.net/LQp5y/ 结果
工作电流： http://jsfiddle.net/QyWS7/

结果
HTML标记：

 ＆lt;节类=主＆GT;
        ＆LT; D​​IV CLASS =包装＆GT;
            ＆LT; UL ID =currentStore级=行＆GT;                ＆LT;！ -  HTML模板 - ＆GT;            ＆LT; / UL＆GT;        ＆LT; / DIV＆GT;
    ＆LT; /节＆gt;
 

搜索结果
HTML模板：

 ＆LT;！ -  100李时珍 - ＆GT;
    ＆LT;立GT;
        ＆LT; D​​IV CLASS =倒装集装箱ontouchstart =this.classList.toggle（'悬停'）;＆GT;
            ＆LT; D​​IV CLASS =脚蹼＆GT;
                ＆LT; D​​IV CLASS =前＆GT;
                    ＆所述;跨度大于1＆下; /跨度＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =后面＆GT;
                    ＆LT;跨度＆GT;买入＆LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; /李＆GT;
 

结果
的Javascript（目前）

  VAR TOADD = document.createDocumentFragment（）;
    对于（VAR I = 1; I＆LT; 101;我++）{
       VAR newLi =使用document.createElement（礼）;
       newLi.id ='产品'+ I;
       newLi.className ='项目';
       newLi.innerHTML ='产品'+ I;
       toAdd.appendChild（newLi）;
    }    的document.getElementById（'currentStore'）的appendChild（TOADD）。
 

结果
可有人告诉我正确的方式做到这一点？在此先感谢！

解决方案

  VAR TOADD = document.createDocumentFragment（）;
    变种I = 1;
            而（ⅰ＆所述; 101）{
               VAR newLi =使用document.createElement（礼）;
               newLi.id ='产品'+ I;
               newLi.className ='项目';
               newLi.innerHTML ='＆LT;立GT;
        ＆LT; D​​IV CLASS =倒装集装箱ontouchstart =this.classList.toggle（\\'悬停\\'）;＆GT;
            ＆LT; D​​IV CLASS =脚蹼＆GT;
                ＆LT; D​​IV CLASS =前＆GT;
                    ＆LT;跨度＆GT;'+ I +'＆LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =后面＆GT;
                    ＆LT;跨度＆GT;买入＆LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; /李＆GT;';
               toAdd.appendChild（newLi）;
               我++;
            }    的document.getElementById（'currentStore'）的appendChild（TOADD）。
 

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!

解决方案

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

这篇关于如何添加HTML模板内的JavaScript中循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！