通过循环动态显示html元素

我正在使用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循环就足够了。 我希望能够在按钮单击时执行此操作（即，一旦我单击按钮，循环开始运行的function）也是如此。 我只是不确定如何实现这一目标。 任何帮助将不胜感激。 提前致谢。

Answer 1

使用vanilla Javascript （不使用jQuery）：

您可以使用document.createElement在页面上创建所需的任何类型的元素 。 以下是在

创建元素的上述循环，其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 = $(""); btn.text('Button '+i); $('#test').append(btn); } 

Answer 2

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

  ... 
 

Answer 3

参考： document.write（） ， Javascript事件

       Click to generate content!   

Answer 4

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

 
 Trigger  

JS

 $('.trigger').on('click', function(){ LoopTest(); }); function LoopTest() { var i=0; var stop=5; for (i=0;i<5;i++){ $('body').append('Trigger No. ' + i + '') } }