如何在循环中创建元素并将其添加到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>