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

Can you generate html locally, without using a server?

本文关键字：html 情况下 服务器      更新时间：2023-09-26

我正在尝试使用循环在本地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">

这不会产生任何内容。有没有办法在不使用服务器/本地主机的情况下循环显示图像？

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

<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>

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

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

并更改appendChild的参数.

正如malix在他的评论中所说，你应该使用document.getElementById("polybridges").appendChild(elem);而不是document.getElementById("polybridges").appendChild("hallo");（所以附加元素而不是字符串"hallo"）。

而且，正如其余部分所述，图像应该在您告诉浏览器它们的位置。

是的，您可以在没有服务器的情况下显示图像，您必须将该图像放在与html文件相同的目录中images或者位于与html文件处于同一级别的文件夹中（在这种情况下，图像将作为<img src="images/polybridge_5.gif">

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

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

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

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>

相关文章：