如何在循環中創建元素並將其添加到DOM

Question

我想附加num的量img元素到DOM，並為每個圖像的id ，根據該num它。 我知道我需要一個循環，所以這是我到目前為止的內容：

 window.onload = function makeImage(){ for(i=0;i<num;i++){ document.getElementById('test').innerHTML="<img id='i' src='img/image.jpg'/>"; } }; 

 <div id="test"></div> 

Answer 1

以下是一些代碼段和注釋，它們可以為您提供幫助。 在id='i' ，看起來像這樣： '<img id="'+i+'"' 。 您在JavaScript中使用+號進行連接，因此請用引號將字符串關閉，然后進行連接，然后再次打開該字符串。 將其分解為多個步驟，將更容易學習。 這是不帶值的字符串： '<img id=""'然后，您需要在雙引號之間插入並關閉並用單引號打開字符串，然后將i連接起來，因此： '+i+' 。 總共得到'<img id="'+i+'"'

 var num = 2; // addEventListener is better practice than onload window.addEventListener('load', function() { // get the element reference before the loop (no need to repeat this) var testElem = document.getElementById('test'); for(i = 0; i < num; i++) { // create an img element, this is better practice than using innerHTML var img = document.createElement('img'); img.src = "//placehold.it/100x100"; img.id = 'image'+i; testElem.appendChild(img); } }); 

 <div id="test"></div> 

您還可以通過串聯新圖像來使用innerHTML ，如以下示例所示，但這有缺點。 在此處閱讀有關createElement與innerHTML的更多信息 。

 var num = 2; window.addEventListener('load', function() { var testElem = document.getElementById('test'); for(i = 0; i < num; i++) { testElem.innerHTML+= '<img id="image'+i+'"src="//placehold.it/100x100">'; } }); 

 <div id="test"></div> 

Answer 2

這里的問題是您沒有循環添加圖像，舊圖像只是被新圖像覆蓋。 由於您正在使用=運算符。

document.getElementById('test').innerHTML="<img id='i' src='img/image.jpg'/>";
-----------------------------------------^

使用+=代替，另外，您還需要連接i值以獲得圖像唯一ID：

 var html = ""; var num = 3 for (var i = 1; num >= i; i++) { html += '<img src="http://www.tatwellness.com/store/image/cache/data/homewelcome/no%20image-200x200.png" id="img' + i + '"/>'; } document.getElementById('test').innerHTML = html; 

 img { border: 1px solid grey; margin: 5px; } 

 <div id="test"></div>