您可以在本地生成html，而無需使用服務器？

我想使用循環在本地html文件中顯示圖像。這是我想它在Web瀏覽器中顯示的內容：您可以在本地生成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">

這不會產生任何東西。有沒有辦法在不使用服務器/本地主機的情況下在循環中顯示圖像？

來源

2016-02-27 Janneman96

把你的圖片在同一目錄中您的HTML文件。 – giannisf

將div標籤放在腳本之前或讓您的函數運行onload。追加元素而不是字符串 – Obsidian

AppendChild（elem）怎麼樣？ – malix

起初你的元素必須以股代息之前定義t執行（所以改變順序）。我想你要追加（而不是"hallo"字符串）elem：

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

來源

2016-02-27 15:39:04 madox2

哦哎呀哈哈是啊我保持在那裏，我試圖如果我可以在文本中設置div，但沒有工作，我忘了把「你好」回來。 – Janneman96

我編輯它回到我的嘗試。 – Janneman96

是可以顯示不服務器映像，你必須有在同一個目錄下的圖像作爲您的HTML文件或images文件夾這在同一級別的HTML文件（這種情況下，圖像將可以作爲<img src="images/polybridge_5.gif">

來源

2016-02-27 15:38:55

把你的圖片在同一目錄中您的HTML文件。

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

並更改論據appendChild。

來源

2016-02-27 15:39:02 giannisf

appendChild採取節點作爲參數（不串）

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

來源

2016-02-27 15:39:13

在他的評論作爲malix狀態，你應該使用document.getElementById("polybridges").appendChild(elem);代替document.getElementById("polybridges").appendChild("hallo");（所以追加元素而不是字符串「hallo」）。

而且，如其他狀態一樣，圖像應該是您告訴瀏覽器的位置。

來源

2016-02-27 15:41:34 minitauros

對不起，我讀了。嘗試將文本設置爲字符串以測試是否有效，我忘了將elem放回。 – Janneman96

它仍然無法正常工作？ – minitauros

問題是，我試圖訪問該div之前我宣佈它。看到madox2的回答。 – Janneman96

你需要照顧一件事。您正試圖通過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>

來源

2016-02-27 15:43:24 RRK

您可以在本地生成html，而無需使用服務器？

回答

相關問題