如何在循环中创建元素并将其添加到DOM中

How to create and add elements to the DOM in a loop

本文关键字：添加 DOM 元素 循环 创建      更新时间：2023-09-26

我想把num数量的img元素附加到DOM中，并根据它是哪个num给每个图像一个id。我知道我需要一个循环，所以这就是我目前所拥有的：

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>

以下是一些应该对您有所帮助的代码片段和注释。如果您有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>

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

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>

相关文章：