javascript - 如何在循环中创建元素并将其添加到 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通过连接新图像，如下例所示，但这有缺点。 Read more about createElement vs innerHTML here .

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>