无法读取 属性 'appendChild' 的未定义错误

Question

我正在尝试使用 JavaScript 中的 for each 方法将此数组中的所有图像显示到我的网页。

问题是 'grid' 未使用追加子方法定义。

知道如何解决这个问题吗？

const bannatyneImgs = ['<img src="images/bannatynes/28-06-19/IMG_0316.jpg" class="gallery" alt="#">',
                       '<img src="images/bannatynes/28-06-19/IMG_0317.jpg" class="gallery" alt="#">',
                       '<img src="images/bannatynes/28-06-19/IMG_0318.jpg" class="gallery" alt="#">',]

const bannatyneGal = document.querySelector('.bannatyne')

bannatyneImgs.forEach(function displayBannatyne(images, index, array, grid) {

    let image = images;

    let divElement = document.createElement('div');
    divElement.classList.add('gallery-image');
    divElement.innerHTML = image;
        
    grid.appendChild(divElement);
})

displayBannatyne(bannatyneImgs, bannatyneGal)

Answer 1

const bannatyneImgs = [
  '<img src="./images/bannatynes/28-06-19/IMG_0316.jpg" class="gallery" alt="#">',
  '<img src="./images/bannatynes/28-06-19/IMG_0317.jpg" class="gallery" alt="#">',
  '<img src="./images/bannatynes/28-06-19/IMG_0318.jpg" class="gallery" alt="#">',
];

const bannatyneGal = document.querySelector(".bannatyne");

document.addEventListener("DOMContentLoaded", () => {
    bannatyneImgs.forEach(function (images) {
       let image = images;

      let divElement = document.createElement("div");
      divElement.classList.add("gallery-image");
      divElement.innerHTML = image;
      console.log(divElement);

      bannatyneGal.appendChild(divElement);
  });
});