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

Question

我正在我的网站上制作一个小画廊，它包含很多图片，我如何使用 for 循环将其添加到li我的网站中。

这是我现在的 HTML，而不是所有<li>我想要的for循环。HTML：

<div id="pictureBlock">
    <div id="three-columns" class="grid-container">
        <ul class="rig columns-3">
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
            <li><img src="images/7.jpg" /></li>
            <li><img src="images/8.jpg" /></li>
            <li><img src="images/9.jpg" /></li>
            <li><img src="images/10.jpg" /></li>
            <li><img src="images/11.jpg" /></li>
            <li><img src="images/12.jpg" /></li>
            <li><img src="images/13.jpg" /></li>
            <li><img src="images/14.jpg" /></li>
            <li><img src="images/15.jpg" /></li>
        </ul>
    </div>
</div>

Answer 1

使用jQuery：

var ul = $('ul.rig');
var count = 15; // number of images

for(var i = 1; i <= count; i++) {
    ul.append('<li><img src="images/' + i + '.jpg"></li>');
}