如何使用Javascript中的DOM在HTML父标记中多次插入相同的图像？

我想在Javascript的帮助下，在HTML

标记中插入相同的图像3次。如下

<p class="image flex">
    <img
        src="images/Heart.png"
        alt="character image"
        class="images img"
    />
    <img
        src="images/Heart.png"
        alt="character image"
        class="images img"
    />
    <img
        src="images/Heart.png"
        alt="character image"
        class="images img"
    />
</p>

为了在JavaScript中添加这一点，我使用了以下代码

const img = document.querySelector('.image');
const image = new Image();
image.src = "images/Heart.png";
image.alt = 'character img';
image.classList.add('images', 'img');

for (let i = 0; i < 3; i++) {
    img.appendChild(image);
}

const img=document.querySelector（'.image'）；
常量图像=新图像（）；
image.src=“images/Heart.png”；
image.alt='character img'；
image.classList.add（'images'，'img'）；
for（设i=0；i<3；i++）{
附加子对象（图像）；
}

这段代码只提供这样的输出

<p class="image flex">
    <img
        src="images/Heart.png"
        alt="character img"
        class="images img"
    />
</p>

您只创建了一次元素。这样您就可以在同一个父元素中附加同一个元素三次，在这种情况下，这基本上只会浪费CPU资源

事实上，基于MDN，感谢@araraonline指出了这一点

如果给定的子节点是对文档中现有节点的引用， appendChild（）将其从当前位置移动到新位置 （不需要从其父节点中删除节点 在将其附加到其他节点之前）

这意味着节点不能位于文档的两点中 同时。因此，如果节点已经有父节点，则该节点是第一个 删除，然后附加到新位置

您应该做的是在循环中创建元素

const img = document.querySelector('.image');

for (let i = 0; i < 3; i++) {
  const image = new Image()
  image.src = "images/Heart.png";
  image.alt = 'character img';
  image.classList.add('images', 'img');
  img.appendChild(image);
}

const img=document.querySelector（'.image'）；
for（设i=0；i<3；i++）{
常量图像=新图像（）
image.src=“images/Heart.png”；
image.alt='character img'；
image.classList.add（'images'，'img'）；
附加子对象（图像）；
}

作为额外内容，上的前两段很好地解释了

appendChild

方法。@araraonline这绝对是有用的信息。我要补充一句谢谢，我想我理解了这个概念。谢谢大家的帮助@AbanaClara