Для циклов только петли 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. Затем вы повторно вставляете в тот же элемент. Поэтому браузер думает, что вы делаете это:

Создать элемент li. Дайте ему className. Теперь начните цикл через массив myArrImg. В первый раз вставьте этот элемент li. Во второй раз вставьте этот элемент li. В третий раз вставьте этот элемент li. И так далее.

Необходимо каждый раз создавать новые элементы li, поскольку любой элемент может существовать только один раз в документе. По сути, вы держите удаления элемента из документа и положить его обратно в том же месте, чтобы создавать новые элементы каждый раз, создать li внутри цикла:

var li; 

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

Answer 2

Здесь я создал ул, поскольку JSFiddle не позволяет манипулировать документ, но процесс такой же

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

 
function dotsAuto(){ 
 
    var test = document.getElementById('test'); 
 

 

 
    for (i = 0; i < myArrImg.length; i++) { 
 
    var li = document.createElement('li'); 
 
     li.className = 'dots'; 
 
     li.innerHTML = myArrImg[i]; 
 
\t test.appendChild(li); 
 
    } 
 
} 
 
dotsAuto();

<ul id="test"> 
 

 
</ul>

В основном вы создаете ONE li для цикла цикла EACH, а затем добавьте его в список