Question

我试图动态创建100个li并附加一个＆＃34;模板＆＃34; html里面的每一个。最重要的是，我想动态增加id =＆＃34; Increment＆＃34;在该模板中跨越元素1，如... 1,2,3 ---＆gt; 100

期望效果：http://jsfiddle.net/LQp5y/
目前的工作：http://jsfiddle.net/QyWS7/

HTML标记：

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

                <!-- HTML TEMPLATE -->

            </ul>

        </div>
    </section>

HTML模板：

    <!-- 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（目前）

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

有人能告诉我这样做的正确方法吗？提前谢谢！

Answer 1

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

Answer 2

你可以这样做Fiddle：

为了便于阅读，创建一个函数，注意每行上的\用于删除行之间的空格..

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>';
}

将您的javascript更改为：

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

如何在Javascript中的for循环中附加html模板？

2 个答案: