javascript - For 循环仅循环 1 次 - JavaScript

Question

嗨，我正在尝试创建一个 for 循环，它会根据有多少图像自动添加“点”，我使用 myArrImg.length 但它只输出一个带有一类点的 li 一次，即使它应该这样做四次？谁能帮助我:)

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg'];

function dotsAuto(){
  var test = document.getElementById('test');
  var li = document.createElement('li');
  li.className = 'dots';

  for (i = 0; i < myArrImg.length; i++) {
    test.appendChild(li);
  }
}
dotsAuto();

Answer 1

你的问题不是你想的那样。循环运行了正确的次数，但它没有按照您的预期进行。

问题是您只创建了一个 li 元素。然后，您可以重复插入同一元素。所以浏览器认为你正在这样做:

Create an li element. Give it a className. Now, start looping through the myArrImg array. On the first time, insert that li element. On the second time, insert that li element. On the third time, insert that li element. And so on.

每次都需要创建新的 li 元素，因为任何元素在文档中只能存在一次。本质上，您不断从文档中删除元素并将其放回同一位置。要每次创建新元素，请在循环中创建 li:

var li;

for (i = 0; i < myArrImg.length; i++) {
  li = document.createElement('li');
  li.className = 'dots';
  test.appendChild(li);
}