appendChild не отвечает после изменения класса - VANILLA Javascript

Question

Я нашел ответы, ссылаясь на этот вопрос, но большинство из них, похоже, было основано на jQuery. В качестве упражнения я создаю приложение слайдера изображения в jQuery, а затем Javascript. Я хочу понять, что делает jQuery под капотом, и иметь возможность принять решение использовать его или нет на основе проекта.

Моя проблема заключается в следующем: когда я нажимаю на следующую кнопку, я хочу, чтобы галерея скользила влево, а prevImg будет удалено, currentImg станет следующим и так далее. Затем я добавлю элемент li с соответствующим классом nextImg и изображением.

Все работает нормально, но строка кода nextImg.appendChild(next_ImgPath) не добавляет изображения.

function slideAnimSetting(direction) { 
    counterAction(); 

    if (direction == 1) { 
     establishImgPaths(); 

     for (var i = 0; i < innerListEl.length; i++) { 
      leftPosition = innerListEl[i].offsetLeft; 
      topPosition = innerListEl[i].offsetTop; 
      Tween.to(innerListEl[i], 1, {left: leftPosition-700}); 
     }; // end for 

     prevImg.removeAttribute('class'); 
     currentImg.className = 'prevImg'; 
     nextImg.className = 'currentImg'; 

     listEle = document.createElement('li'); 
     listEle.className = 'nextImg'; 

     for (var i = 0; i < innerUlEl.length; i++) { 
      innerUlEl[i].appendChild(listEle); 
     }; //end for 

     nextImg = document.getElementsByClassName('next-img'); 
     nextImg = nextImg[0]; 
     nextImg.appendChild(next_ImgPath); 

     setImageStyles(); 
    } 
}; // end slideAnimSetting 

Консоль.log сообщает мне, что nextImg не определено.

Answer 1

Вы дали ему имя класса nextImg, но вы ищете next-img.