Javascript循环/增加值高达55的html代码答案

【问题标题】：Javascript to loop / increment html code with values up to 55Javascript循环/增加值高达55的html代码
【发布时间】：2013-05-09 09:26:58
【问题描述】：

我需要在静态 (.html) 页面中自动创建链接列表，有没有使用 JavaScript 的方法。我厌倦了一些脚本，但无法完成。

这是我的html...

<a href="1.html"><img src="images/1.jpg" width="119" height="121" alt="" /></a>

这就是我希望脚本生成 55 次...

<a href="1.html"><img src="images/1.jpg" width="119" height="121" alt="" /></a>
<a href="2.html"><img src="images/2.jpg" width="119" height="121" alt="" /></a>
<a href="3.html"><img src="images/3.jpg" width="119" height="121" alt="" /></a>

...等等，叫我懒惰，但任何帮助将不胜感激:)

【问题讨论】：

标签： javascript html loops static

【解决方案1】：

这应该可以解决问题：

<div id="links">
</div>

<script>
var strLinks = '';

for (var i = 1; i <= 55; i++) {
    strLinks += '<a href="'+ i +'.html"><img src="images/'+ i +'.jpg" width="119" height="121" alt="" /></a>';
}

document.getElementById("links").innerHTML = strLinks;
</script>

JS Fiddle 示例：http://jsfiddle.net/RWUdG/2/

编辑：哎呀，错过了一个报价。固定。

【讨论】：

【解决方案2】：

这也可以。

<div id="imgs">
</div>

<script>
var i = 55; while (i--) {document.getElementById("imgs").innerHTML += '<a href='+ i +'.html"><img src="images/'+ i +'.jpg" width="119" height="121" alt="" /></a>';}
</script>

http://jsfiddle.net/T2c3G/

【讨论】：

我不完全确定，但这不会让浏览器在每次循环迭代时呈现代码吗？可能很慢...
可以，但与@adam-plocher 的示例相比，加载时间大致相同。
我也想知道 - 如果将它放入 str var 然后将其应用到 DOM 一次会更快。运行一些基准测试并查看会很有趣。仅供参考 - 倒计时 55 到 1。
@adam-plocher 当您提供大量图像时，它肯定会减慢速度。我只是提供选项，因为 55 张图片并没有太大的区别。它是从 55 计数到 1 的问题吗？无论哪种方式，您都在设置最大 int。

【解决方案3】：

如果你的锚标签包含在一个 div 中，你可以这样做：

$(document).ready(function(){
var linksHtml = "";
for(var i = 1; i <= 55; i++){
    linksHtml += '<a href="'+(i)+'.html"><img src="images/'+(i)+'.jpg" width="119" height="121" alt="" /></a>';
}
$("#linksDiv").html(linksHtml);
});

【讨论】：