使用javascript for语句创建一组缩略图链接

我想使用javascript用链接到全尺寸图像的缩略图填充HTML页面的一部分。当前，当代码运行时，只会打印p打开和关闭。我想让它为img（#）制作缩略图，其中#是1-41

javascript:

document.getElementById('img').innerHTML = "<p>"
for( var img = 1; img >= 41; img++)
{
    document.getElementById('img').innerHTML += ("<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>")
}
document.getElementById('img').innerHTML += "</p>"

document.getElementById（'img'）.innerHTML=“”
对于（var img=1；img>=41；img++）
{
document.getElementById（'img'）。innerHTML+=（“”）
}
document.getElementById（'img'）。innerHTML+=“
”

HTML:

---

您在条件部分的中有一个错误。替换

for( var img = 1; img >= 41; img++)

与

for（var img=1；img两件事：

在循环内部和循环之后，您都在为元素的
innerHTML
分配一个全新的值，覆盖以前可能包含在其中的任何内容。显然，在第一篇文章之后，您将问题编辑为使用
+=
。即使如此，使用
innerHTML+=…
也是一个坏主意，因为它会导致浏览器不断地重新序列化元素的DOM并每次重新解析字符串，如果您将半完整的HTML（如
“”
）交给它，它在执行
+=
时使用的可能是
“
”
-因此，当您添加到变量中时，您添加的内容最终会出现在错误的位置。相反，请在变量中构建文本，然后在最后分配一次

您从
img=1
开始，然后告诉循环在
img>=41
时继续。因此循环体永远不会运行，因为
1
不是
=41

最小更新：

var markup = "<p>";
for( var img = 1; img <= 41; img++)
{
    markup += "<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>";
}
document.getElementById('img').innerHTML = markup + "</p>";

var-markup=“”；
对于（var img=1；img，第一个语句是不正确的，因为OP在循环内部和之后使用了
+=
。但是，我喜欢您的解决方案，因为它不会多次进行DOM查找来设置
innerHTML
，我正要说与Vadim相同的话：）事实上，我编辑了它，因为我必须使用+=最初它只是=他在我保存编辑之前加载了页面
for( var img = 1; img <= 41; img++)

var markup = "<p>";
for( var img = 1; img <= 41; img++)
{
    markup += "<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>";
}
document.getElementById('img').innerHTML = markup + "</p>";