Solution + Security Q - is it ever OK to use innerHTML or innerAdjacentHTML instead of textContent?

// get the main section of the page, which we will add to
let main = document.querySelector('main');

// function to create the elements needed for each object
function makeElements() {
  let elements = ['h2', 'h3', 'p', 'img'];
    for (let i = 0; i < elements.length; i++) {
      elements[i] = document.createElement(elements[i]);
  }
  return elements;
}
  // loop through each object in the pets array
  for (let x = 0; x < pets.length; x++) {
    // create a new elements array using function
    let pageElements = makeElements();
    // for each object, set the content of the elements to the property values that we want
    pageElements[0].textContent = pets[x].name;
    pageElements[1].textContent = `${pets[x].type} | ${pets[x].breed}`;
    pageElements[2].textContent = `Age: ${pets[x].age}`;
    pageElements[3].src = pets[x].photo;
    pageElements[3].alt = pets[x].breed;
    // add the elements to the page using a loop
    for (let y = 0; y < pageElements.length; y++) {
       main.appendChild(pageElements[y]);
    }
 }