Solution 1 :

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>

Solution 2 :

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.

Solution 3 :

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>

Problem :

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!

By