HTML/Javascript DOM图像/图形

Question

尝试使用DOM内容创建一个带标题的图形元素。

设法使它只与图像一起工作，但我不确定如何将其实现为图形。这是我当前的图像代码。

<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>

以下是图像阵列：(链接不起作用，但不用担心(

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'
}
];

如有任何帮助，我们将不胜感激！

Answer 1

您应该首先创建<figure>元素，然后创建具有特定属性值的<img>和<figcaption>。

尝试以下方式：

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>

Answer 2

创建图形：

let figure = document.createElement('figure');

要将图像(在原始代码中创建(添加到图中：

figure.appendChild(imageElem)

然后，您可以将图形附加到图像列表中，而不是直接附加图像。如果你愿意，你也可以在每个图上附加一个"figcaption"元素。

Answer 3

您有一个小错误影响了它——您没有转义一个引号。

caption: 'Peter's river'

这里有一个Codepen，演示您想要什么：https://codepen.io/richjava/pen/oNXWrzM.为每个图形元素生成的HTML现在看起来像这样：

<figure>
<img alt="Mount" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg"> 
</figure>