Question

我正在使用javascript和jquery。我希望能够像循环允许的那样多次显示buttom，一些文本和/或任何html元素或组件。我能够循环并打印警报语句

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

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

Answer 1

使用vanilla Javascript（不使用jQuery）：

您可以使用document.createElement在页面上创建所需的any type of element。以上是在<INPUT TYPE='BUTTON'>中<div> 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);
}

Answer 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>

Answer 3

参考：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>

Answer 4

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

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

JS

$('.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 个答案: