You should create the <figure>
element first, then create the <img>
and <figcaption>
with the specific attribute value.
Try the following way:
const images = [
{
caption: 'Mountain of slate',
alt: 'Mount',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg'
},
{
caption: 'Peter's river',
alt: 'Riv',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Riv.jpg'
},
{
caption: 'Desert of Lybia',
alt: 'Des',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Des.jpg'
},
{
caption: 'Amazon Forest',
alt: 'For',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/For.jpg'
},
{
caption: 'Malaysia',
alt: 'Jung',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Jung.jpg'
}
];
images.forEach(images=>{
let figElem = document.createElement('figure');
let imageElem = document.createElement('img');
imageElem.alt = images.alt;
imageElem.src = images.url;
let figCaptionElem = document.createElement('figcaption');
figCaptionElem.textContent = images.caption;
figElem.appendChild(imageElem);
figElem.appendChild(figCaptionElem);
let imagese = document.getElementById('image');
imagese.appendChild(figElem);
})
<div id="image">
<h3>Landscape</h3>
<script src="js/image.js"></script>
</div>
To create a figure:
let figure = document.createElement('figure');
To add an image (as created in your original code) to the figure:
figure.appendChild(imageElem)
Then you could append the figures to your image list instead of appending the images directly. You could also append a ‘figcaption’ element to each figure if you want.
You had a little error that was affecting it – you didn’t escape a single quote.
caption: 'Peter's river'
Here is a Codepen that demonstrates what you want: https://codepen.io/richjava/pen/oNXWrzM. The generated HTML for each figure element now looks something like this:
<figure>
<img alt="Mount" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg">
</figure>
Trying to use DOM stuff to create a figure element, with a caption.
Managed to get it working with just image, but I’m not sure how to implement it into a figure.
Here is my current code for image.
<div id="image">
<h3>Landscape</h3>
<script src="js/image.js"></script>
<script>
images.forEach(images=>{
let imageElem = document.createElement('img');
imageElem.alt = images.alt;
imageElem.src = images.url;
let imagese = document.getElementById('image');
imagese.appendChild(imageElem);
})
</script>
</div>
Here is the images array:
(Links don’t work but don’t worry about it)
const images = [
{
caption: 'Mountain of slate',
alt: 'Mount',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg'
},
{
caption: 'Peter's river',
alt: 'Riv',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Riv.jpg'
},
{
caption: 'Desert of Lybia',
alt: 'Des',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Des.jpg'
},
{
caption: 'Amazon Forest',
alt: 'For',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/For.jpg'
},
{
caption: 'Malaysia',
alt: 'Jung',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Jung.jpg'
}
];
Any help would be greaatly appreciated!