Question

我想将num个img元素附加到DOM，并根据id为每个图片num。我知道我需要一个循环，所以这就是我到目前为止所做的：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

以下是一些可以帮助您的代码段和注释。你有id='i'的地方，看起来你想要这个：'<img id="'+i+'"'。您使用+符号在JavaScript中连接，因此请使用引号关闭字符串，然后连接，然后再次打开字符串。通过将其分解为步骤来学习更容易。这是没有值的字符串：'<img id=""'然后，你需要介入双引号并关闭并用单引号打开字符串，并连接i，这样：{{1} }。总而言之，您得到'+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>，如下例所示，但这有缺点。 Read more about createElement vs innerHTML here

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">';
  }
});

Answer 2

这里的问题是你没有在循环中附加图像，旧图像被新图像覆盖。由于您使用的是=运算符。

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

使用+=代替，您还需要连接i值以获取图片唯一ID：

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

如何在循环中创建和添加元素到DOM

2 个答案: