Question

我正在尝试使用循环在本地html文件中显示图像。这就是我希望它在网络浏览器中显示的内容：

<div id="polybridges">
    <img src="polybridge_1.gif">
    <img src="polybridge_2.gif">
    <img src="polybridge_3.gif">
    <img src="polybridge_4.gif">
    <img src="polybridge_5.gif">
</div>

这是我尝试使用javascript执行此操作：

<script>
    for(var i = 1; i <= 5; i++) {
        var elem = document.createElement("img");
        elem.src='polybridge_'+i+'.gif';
        document.getElementById("polybridges").appendChild(elem);
    }
</script>
<div id="polybridges">

这不会产生任何结果。有没有办法在不使用服务器/ localhost的情况下在循环中显示图像？

Answer 1

首先，必须在脚本执行之前定义元素（因此更改顺序）。我想你要追加appendChild（而不是elem字符串）：

"hallo"

Answer 2

将图像放在与html文件相同的目录中。

<img src="images/polybridge_5.gif">

并更改for(var i = 1; i <= 5; i++) { var elem = document.createElement("img"); elem.src='polybridge_'+i+'.gif'; document.getElementById("polybridges").appendChild(elem); }的参数。

Answer 3

正如malix在评论中指出的那样，你应该使用document.getElementById("polybridges").appendChild(elem);而不是document.getElementById("polybridges").appendChild("hallo");（所以请添加元素而不是字符串“hallo”）。

而且，正如其他人所述，图像应该是您告诉浏览器的位置。

Answer 4

是的，您可以在没有服务器的情况下显示图像，您必须将这些图像放在与html文件相同的目录中，或者放在与{html文件位于同一级别的images文件夹中（对于这种情况，图像可用作{ {1}}

Answer 5

appendChild将Node作为参数（不是字符串）

<div id="polybridges"></div>
<script>
    for(var i = 1; i <= 5; i++) {
        var elem = document.createElement("img");
        elem.src='polybridge_'+i+'.gif';
        document.getElementById("polybridges").appendChild(elem);
    }
</script>

Answer 6

你需要照顾一件事。您正在尝试通过ID获取元素。所以你需要确保html是有效的。为元素提供适当的关闭标记。还可以使用elem中的appendChild()变量。

for (var i = 1; i <= 5; i++) {
  var elem = document.createElement("img");
  elem.src = 'polybridge_' + i + '.gif';
  console.log(elem)
  document.getElementById("polybridges").appendChild(elem);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="polybridges"></div>

你可以在不使用服务器的情况下在本地生成html吗？

6 个答案: