Cannot read property 'appendChild' of undefined error

Question

I am trying to display all the images in this array to my web page using the for each method in JavaScript.

The issue is that 'grid' is undefined with the append child method.

Any idea how I can resolve this issue?

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);
  });
});