通过循环动态显示html元素

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创建所需的任何类型的元素.下面是上面的循环建立<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 一段时间以来一直被认为是一种不好的做法.)

使用jQuery,您可以:

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