在 DOM js 中添加多个图像 - Javascript

在使用 Javascript 操作 DOM 时，添加多个图像是一项常见的需求。以下是如何通过 Javascript 动态地在 DOM 中添加多个图像的步骤。

创建图像元素

首先，我们需要创建图像元素。使用 DOM API 中的 createElement 方法创建一个图像元素，然后为其设置 src 属性和 alt 属性，如下所示：

const img = document.createElement('img');
img.src = 'image.png';
img.alt = 'My image';

添加图像元素到 DOM 中

接下来，我们需要将图像元素添加到 DOM 中。可以使用 DOM API 中的 appendChild 方法将图像元素添加到一个父元素中，如下所示：

const parent = document.getElementById('parent');
parent.appendChild(img);

要添加多个图像元素，只需重复上述步骤。

完整示例

const parent = document.getElementById('parent');

const img1 = document.createElement('img');
img1.src = 'image1.png';
img1.alt = 'Image 1';

const img2 = document.createElement('img');
img2.src = 'image2.png';
img2.alt = 'Image 2';

parent.appendChild(img1);
parent.appendChild(img2);

以上示例将在一个名为 parent 的元素中添加两个图像元素。

在实际应用中，您可以使用循环来动态地创建和添加多个图像元素，以满足您的需求。

希望这个简单的指南能帮助您学习如何在 DOM 中添加多个图像！