Image array not showing pictures

hello I would like to know if using innerHTML to display images in array its the right way to do it, I’m trying to do it in this way but its not working I dont know if the reason is because im using innerHTML or should I use a different property?
CODEPEN

The code is correct with the exception that you would want to be adding img elements with their src attribute values being the images. Currently, you just create a string of image file names. Remember an image tag as the following syntax:

<img src="1.jpg" />

Thank you very much, I was trying another ways and I was wondering why in this other manner the images did display not using

<img src="1.jpg" />

even when I used the same method of

var myArray = ["1.jpg", "2.jpg", "3.jpg"];

ANOTHER WAY:

var myArray = ["1.jpg", "2.jpg", "3.jpg"];
var animalContainer = document.getElementById("animal");

for (var i = 0, p = myArray.length; i < p; i++) {
  var img = document.createElement("img");
  img.src = myArray[i];
  img.className = "animalStyle";
  animalContainer.appendChild(img);
};


THANKS SO MUCH