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

Question

我想在我的 HTML 中插入同一张图片 3 次 </p>在 Javascript 的帮助下标记。如下图

<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);
}

此代码仅提供类似这些的输出。

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

Answer 1

您只创建了一次元素。这样您就可以在同一个父级中附加同一个元素三次，这基本上除了浪费 CPU 资源外什么也没做。

实际上，基于 MDN 并感谢@araraonline 指出这一点

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position.

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

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);
}