javascript 通过循环动态显示html元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32382450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically display html elements via loop
提问by user1898629
I am working with javascript and jquery. I want to be able to display a buttom, some text, and/or really any html elements or components as many times as the loop allows. I am able to loop through and print alert statements
我正在使用 javascript 和 jquery。我希望能够在循环允许的范围内多次显示按钮、一些文本和/或任何 html 元素或组件。我能够循环并打印警报语句
function LoopTest() {
var i=0;
var stop=5;
for (i=0;i<5;i++)
{ alert("count: " + i); }
}
Simple enough. This would give me 5 alert statements, but instead of using alert statements, I want to be able to display a button or some text or any other html elements. So I would get five buttons displayed on an html page. Is this possible? I'm actually using a .foreach function but for ease of use, a regular for loop would suffice for now. I want to be able to do this on button click (i.e., the function that has the loop starts running once I click a button) also. I'm just not sure really how to accomplish this. Any help would be greatly appreciated. Thanks in advance.
足够简单。这会给我 5 个警报语句，但我希望能够显示一个按钮或一些文本或任何其他 html 元素，而不是使用警报语句。所以我会在 html 页面上显示五个按钮。这可能吗？我实际上使用的是 .foreach 函数，但为了便于使用，现在常规的 for 循环就足够了。我也希望能够在单击按钮时执行此操作（即，一旦我单击一个按钮，具有循环的函数就会开始运行）。我只是不确定如何做到这一点。任何帮助将不胜感激。提前致谢。
回答by Y-Love
With vanilla Javascript(without using jQuery):
使用vanilla Javascript（不使用 jQuery）：
You can use document.createElementto create any type of elementyou want on the page. Here's the above loop creating <INPUT TYPE='BUTTON'>elements in a <div>with an idof test:
您可以使用它在页面上document.createElement创建任何类型的元素。下面是上面的循环建立<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);
}
}
(In general, using document.write has been considered a bad practicefor a while now.)
（一般来说，使用 document.write一段时间以来一直被认为是一种不好的做法。）
With jQuery, you can do:
使用 jQuery，您可以执行以下操作：
for (i=0;i<5;i++) {
var btn = $("<button/>");
btn.text('Button '+i);
$('#test').append(btn);
}
回答by m.antkowicz
You can use innerHTMLfield to add any html content into container on you page.
您可以使用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>
回答by Anvesh Arrabochu
Refer: document.write(), Javascript events
参考：document.write()，Javascript 事件
<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>
回答by Leo Javier
This is a solution : http://jsfiddle.net/leojavier/gbuLykdj/
这是一个解决方案：http: //jsfiddle.net/leojavier/gbuLykdj/
<div class="container">
<button class="trigger">Trigger</button>
</div>
JS
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>')
}
}
