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

【问题标题】：How to append html template inside a for loop in Javascript?如何在 Javascript 的 for 循环中附加 html 模板？
【发布时间】：2014-08-02 07:41:11
【问题描述】：

我正在尝试动态创建 100 里并在每个里附加一个 html 的“模板”。最重要的是，我想在该模板中动态地将 id="Increment" span 元素增加 1，例如... 1, 2, 3 ---> 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);

有人可以告诉我正确的方法吗？提前致谢！

【问题讨论】：

标签： javascript jquery templates append innerhtml

【解决方案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);

【讨论】：

谢谢老兄！让它像魅力一样工作...jsfiddle.net/LQp5y ,,, 不过奇怪的是，我必须删除 html 模板的所有空白才能使其工作。不太清楚为什么？也许是一个 jsfiddle 错误或什么？
我可以使用 jquery...但我开始更多地关注纯 JavaScript，因为这些天我正在为移动设备开发。 jquery 是性能杀手！但非常感谢您的帮助！我主要是一个“UI Guy”......我还在学习这些编码的东西'

【解决方案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);

【讨论】：