динамически создавать и вставлять HTML-элементы в DOM, которые воссоздают картину ученика

Question

Я не могу получить массив изображений для отображения в div "pic-grid" с помощью javascript.

Я пытаюсь отобразить их при загрузке страницы и выполнить их динамически с помощью javascript, также не используя innerHTML.

Я могу получить div для отображения в div "pic-grid", но не на изображении.

Я пробовал:

            for (var i = 0; i < personArray.length; i++) {
            var newImage = document.getElementById('pic-grid').appendChild(document.createElement("div"));

            newImage.src = personArray[i].url;

            newImage.setAttribute('class','frame');

            newImage.setAttribute('onclick','promptForName(this)');

            newImage.setAttribute('onmouseover','styleIt(this)');

            newImage.setAttribute('onmouseout','unStyleIt(this)');

        }      

также

        var newImage = document.createElement('div');

        newImage.setAttribute('src', personArray.url);

        newImage.setAttribute('class','frame');

        newImage.setAttribute('onclick','promptForName(this)');

        newImage.setAttribute('onmouseover','styleIt(this)');

        newImage.setAttribute('onmouseout','unStyleIt(this)');

        document.getElementById('pic-grid').appendChild(newImage);

и целый ряд других кодов, которые я, к сожалению, не сохранил / document.

Мне просто нужно иметь возможность получать изображения из переменной personArray с помощьюURL-адрес каждого из div, которые создаются в функции populateImages.

    var currentId = "";
    var x = 0;
    var y = 0;

    var personArray = [{
        firstname: "Bluto",
        url: "https://lfernandez.org/web1430/pics/bluto.jpg"
    },
    {
        firstname: "Abarnave",
        url: "https://lfernandez.org/web1430/pics/abarnave.jpg"
    },
    {
        firstname: "Chris",
        url: "https://portalapps.weber.edu/wcpictures/00NGJGHQ.JPG"           
    }
    ,
    {
        firstname: "Bryson", 
        url: "https://portalapps.weber.edu/wcpictures/00MA8QNC.JPG"
    },
    {
        firstname: "Cory", 
        url: "https://portalapps.weber.edu/wcpictures/00NSXJBT.JPG"
    }
    ,
    {
        firstname: "Ella", 
        url: "https://portalapps.weber.edu/wcpictures/00N4V0E7.JPG"
    },
    {
        firstname: "Sydnie", 
        url: "https://portalapps.weber.edu/wcpictures/00OCFIPQ.JPG"
    },
    {
        firstname: "Derek", 
        url: "https://portalapps.weber.edu/wcpictures/00P7UMKW.JPG"
    },
    {
        firstname: "Ryan", 
        url: "https://portalapps.weber.edu/wcpictures/00N5N0QA.JPG"
    },
    {
        firstname: "Sarah", 
        url: "https://portalapps.weber.edu/wcpictures/00NA065B.JPG"
    },
    {
        firstname: "Spencer", 
        url: "https://portalapps.weber.edu/wcpictures/00OSZTOL.JPG"
    }
    ];


    function populateImages() {
        //Note to student: You have to write the contents of this method!

        for (var i = 0; i < personArray.length; i++) {
            var newImage = document.getElementById('pic-grid').appendChild(document.createElement("div"));

            newImage.src = personArray[i].url;

            newImage.setAttribute('class','frame');

            newImage.setAttribute('onclick','promptForName(this)');

            newImage.setAttribute('onmouseover','styleIt(this)');

            newImage.setAttribute('onmouseout','unStyleIt(this)');

        }          

    }