通过循环动态显示html元素答案

【问题标题】：Dynamically display html elements via loop通过循环动态显示html元素
【发布时间】：2015-11-29 16:35:03
【问题描述】：

我正在使用 javascript 和 jquery。我希望能够在循环允许的范围内多次显示按钮、一些文本和/或任何 html 元素或组件。我能够循环并打印警报语句

function LoopTest() {
var i=0;
var stop=5;
for (i=0;i<5;i++)
{  alert("count: " + i);   }
}

足够简单。这将给我 5 个警报语句，但我希望能够显示一个按钮或一些文本或任何其他 html 元素，而不是使用警报语句。所以我会在一个 html 页面上显示五个按钮。这可能吗？我实际上正在使用 .foreach 函数，但为了便于使用，现在常规的 for 循环就足够了。我也希望能够在单击按钮时执行此操作（即，一旦我单击按钮，具有循环的函数就会开始运行）。我只是不确定如何做到这一点。任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： javascript jquery html loops

【解决方案1】：

使用vanilla Javascript（不使用jQuery）：

您可以使用document.createElement 在页面上创建您想要的any type of element。这是上面的循环在<div> 中创建<INPUT TYPE='BUTTON'> 元素，其中id 是test：

function LoopTest() {
var i=0;
var stop=5;
for (i=0;i<5;i++) {  
 var v = document.createElement('input');
 v.type="button";
 v.value="Button " +i;
 document.getElementById('test').appendChild(v);
}
}

（总的来说，使用 document.write 已经考虑了一段时间了a bad practice。）

使用 jQuery，您可以：

for (i=0;i<5;i++) {  
 var btn = $("<button/>");
 btn.text('Button '+i);
 $('#test').append(btn);
}

【讨论】：

我认为这个例子最适合我。因为我使用的是 jquery，所以我能够将此功能合并到我自己的代码中。感谢您的帮助
感谢大家，尽管这帮助了我。这是我需要看到它才能理解和解决它的事情之一。
我对我的代码做了一些调整，添加了一个 btn.id 和一个 btn.value。是否可以添加 btn.onClick？我正在尝试这样做，但它对我不起作用。当我点击按钮时什么都没有发生
如果您使用 jQuery，请使用 .on() function 添加 onClick 处理程序：btn.on('click', function(event){ doSomething(); }); 使用 vanilla javascript，请使用 addEventListener：button.addEventListener('click', function(event){ doSomething(); });

【解决方案2】：

您可以使用 innerHTML 字段将任何 html 内容添加到页面上的容器中。

<script>

    function LoopTest() 
    {
        var i=0;
        var stop=5;
        for (i=0;i<5;i++)
        {
            document.getElementById("container").innerHTML += "<button>button</button>"
        }
    }

</script>

...

<div id="container"></div>

【讨论】：

【解决方案3】：

这是一个解决方案：http://jsfiddle.net/leojavier/gbuLykdj/

<div class="container">
    <button class="trigger">Trigger</button>
</div>

$('.trigger').on('click', function(){
LoopTest();
});


function LoopTest() {
    var i=0;
    var stop=5;

    for (i=0;i<5;i++){  
       $('body').append('<button class="trigger">Trigger No. ' + i + '</button>')  
    }
}

【讨论】：

【解决方案4】：

参考：document.write()、Javascript events

<html>
    <head>
        <script>
            function LoopTest() {
                var i=0;
                var stop = 5;
                for (i=0;i<5;i++)
                {  
                    document.write('<p>' + i + '</p>'); // This writes the number in a paragraph
                }
            }
        </script>
    </head>
    <body>
        <!--
            Here onclick event is used to recognize the click event,
            which is fired when the user clicks the button,
            this calls the LoopTest() function which generates 5 paragraphs with numbers
        -->
        <button onclick="LoopTest()">Click to generate content!</button>
    </body>
</html>

【讨论】：