Display the alt attribute under image on iframe html

I have this basic website that has multiple images and I want to display the ‘alt’ attributes under each image via javascript. I have tried a few ideas and I made it work. But my problem now is that I want this basic website to be loaded by another, a parent website, via ‘iframe’.

So I have this line of code into the parent website

<iframe id="iframeID" name="iframeName" src="...my basic website" scrolling="auto" frameborder=0 width="100%" height="700"></iframe>

and it loads the basic website with the images. The website with the images has this kind of code:

<div id="gallery">
    <div class="image-container">
        <img src="imageOne.jpg" alt="An image of an elephant">

In the parent website, under


I have this code:

var gallery = document.getElementById('gallery');
var imageContainers = gallery.getElementsByClassName('image-container');

// Loop through the image containers:
    for (var i = 0; i < imageContainers.length; i++) {

    var image = imageContainers[i].getElementsByTagName('img')[0];
    var caption = document.createElement('span');
    caption.innerHTML = image.alt;

and nothing happens.

When I have the exact same code but with a different end line in the ‘script’ of the basic website where the images are




but without the


and I load that website via ‘iframe’ or just open it via its link, all works. I just can’t seem to make the ‘alt’ attributes or any text to display in the ‘iframe’ HTML from the parent website. I can change the style of the iframe HTML but cannot add text into a ‘div’ or ‘span’ or anything. And I do not understand why.

If you could help it would be great.

Thank you.

p.s: I need the basic website to be loaded by the parent website via ‘iframe’; the javascript that displays the ‘alt’ attributes has to be in the parent website, not in the one that is being loaded

p.s.2: both websites are in the same domain and both are mine