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

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

问题描述

限时送ChatGPT账号..

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

预期效果:http://jsfiddle/LQp5y/
当前工作:http://jsfiddle/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/LQp5y/
Current Work: http://jsfiddle/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屋！