Добавление изображения в модал (без BootStrap) с массивами

Question

Итак, я новичок, и это для задания. Я пытаюсь написать функцию JavaScript для добавления нескольких изображений в модальном режиме (модальное получается при нажатии на кнопку).

У меня есть массив, в котором есть имена всех картинок, которые я хочу включить в модал. Я пытаюсь использовать appendChild() для этого.

Таков мой код:

btn.onclick = function() {
  modal.style.display = "block";
  for(let i=0;i<cart.length;i++)
    {
        var imgprod=document.createElement("img"); 
        var x=cart[i]+".jpg";
        imgprod.setAttribute('src',x);
        imgprod.setAttribute('height','100px');
        imgprod.setAttribute('width','100px');
        document.modal.appendChild(imgprod);
    }
}

Здесь, когда нажимается кнопка, отображается пустой модальный modal. Корзина - это мой массив, в котором есть коллекция всех изображений, которые я хочу добавить.

Я получаю следующую ошибку:

example.html:90 Uncaught TypeError: Cannot read property 'appendChild' of undefined at HTMLButtonElement.btn.onclick

Я не понимаю, почему он говорит, что мое изображение не определено?

Пожалуйста, помогите мне исправить это. Альтернативный код принят, но, пожалуйста, позвольте ему быть немного простым для понимания.

Я знаю, что мы можем сделать это, используя BootStrap и jQuery, и если есть решение для этого, используя их, я приму это, покаЯ могу понять, что происходит (потому что, опять же, я только начал учиться).

(я слышал о Node.js, но я не знаю, как он работает, я не могу его использовать)

Извините, если это выглядит глупо, но я искренне пытаюсь понять, что происходит!

Заранее спасибо.