如何在Javascript中使用DOM在HTML父標記中多次插入相同的圖像？

Question

我希望借助Javascript在我的HTML </p>標簽中插入相同的圖像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);
}

這段代碼只提供這些輸出。

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

Answer 1

您只創建了一次元素。 這樣你就可以在同一個父元素中將相同的元素追加三次，這基本上只會在這個上下文中浪費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);
}