如何在javascript中使用for循环来添加HTML

我在我的网站上创建了一个小图库，它包含很多图片，我如何使用for循环在我的网站中添加li 。

这是我的HTML，而不是所有那些

我想要一个for循环。 HTML：

Answer 1

使用jQuery：

 var ul = $('ul.rig'); var count = 15; // number of images for(var i = 1; i <= count; i++) { ul.append('
'); } 

Answer 2

我相信最简单的方法是使用jQuery ：

 var numberOfImages = 15; var $container = $("#pictureBlock ul"); for (var i=1; i<=numberOfImages; i++) { $container.append('
'); } 

Answer 3

01 – 如果您的图像文件名按编号排序并且位于相同位置

 // Define number of images var numImages = 15; // Get the div you want to add element to var rigDiv = $(".rig"); // Loop through images and add them to target div for (var i=1; i <= numImages; i++) { var element = '
'; rigDiv.append(element); } 

02 – 如果您的图像文件名不符合顺序且不在同一目录中

 // Define images array var images = [ 'https://stackoverflow.com/questions/29621860/how-can-i-use-a-for-loop-in-javascript-to-add-html/images/1.jpg', 'https://stackoverflow.com/questions/29621860/how-can-i-use-a-for-loop-in-javascript-to-add-html/images/2.jpg', .... 'https://stackoverflow.com/questions/29621860/how-can-i-use-a-for-loop-in-javascript-to-add-html/images/10.jpg' ]; // Get the div you want to add element to var rigDiv = $(".rig"); // Loop through images and add them to target div for(var image of images){ var element = '
'; rigDiv.append(element); } 

Answer 4

只需你可以使用for循环，

 for (var i = 1; i < 16; i++) { $('ul.rig').append('
') } 

Answer 5

使用jQuery你可以做一些像我刚刚创建的小提琴：

 var pictures = [ "1", "2" ]; $.each(pictures, function(value) { $(".rig").append("
"); }); 

http://jsfiddle.net/wd09ccpa/

在var中，图片必须是您拥有的一些图片列表。

Answer 6

获胜的Jquery：

 for(var i = 1; i <= count; i++) { $('ul.rig').append("
"); } 

Answer 7

Answer 8

 var count = 15; for(let i=1; i<=count; i++){ $("ul").append('
'); }