如何在 Javascript 的 for 循环中附加 html 模板? [英] How to append html template inside a for loop in Javascript?

查看：40
本文介绍了如何在 Javascript 的 for 循环中附加 html 模板?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试动态创建 100 里并在每个里附加一个 html 的模板".最重要的是，我想在该模板中将 id="Increment" 跨度元素动态增加 1，例如... 1, 2, 3 ---> 100

预期效果:http://jsfiddle.net/LQp5y/
当前工作:http://jsfiddle.net/QyWS7/


HTML 标记:

 
<div class="wrapper"><ul id="currentStore" class="row"><!-- HTML 模板-->

</节>



HTML 模板:

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

<div class="back"><span>购买</span>


Javascript(当前)

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


有人可以告诉我这样做的正确方法吗?提前致谢！

解决方案 

var toAdd = document.createDocumentFragment();变量 i=1;而(我< 101){var newLi = document.createElement('li');newLi.id = '产品'+i;newLi.className = 'item';newLi.innerHTML = '
  • <div class="flip-container" ontouchstart="this.classList.toggle(\'hover\');"><div class="flipper"><div class="front"><span>'+i+'</span>

    • <div class="back"><span>购买</span>

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

    这篇关于如何在 Javascript 的 for 循环中附加 html 模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆