如何將 append 多個 img-child 元素添加到一個帶有 JS 的 DOM 元素中？

Question

我想向 div 元素添加多個相同的 img 元素。 為什么我不能只使用 appendChild 幾次？

例如：

divelement.appendChild(imgelement);
divelement.appendChild(imgelement);
divelement.appendChild(imgelement);

將導致

<div>
  <img></img>
</div>

但我怎樣才能實現以下目標？

<div>
  <img></img>
  <img></img>
  <img></img>
</div>

Answer 1

imgelement需要是一個新實例。 如果你添加同一個孩子，它什么也不做。

 const divElement = document.querySelector('#target'); const imgElement = document.createElement('img'); divElement.append(imgElement); // Original reference divElement.append(imgElement); // ^ Same reference divElement.append(imgElement); // ^ Same reference

 img { width: 100px; height: 100px; background: red; }

 <div id="target"></div>

您需要為每個 append 操作創建一個新的圖像實例：

 const divElement = document.querySelector('#target'); const createImgElement = () => document.createElement('img'); divElement.append(createImgElement()); divElement.append(createImgElement()); divElement.append(createImgElement());

 img { width: 100px; height: 100px; background: red; }

 <div id="target"></div>

Answer 2

這種方式應該有效。

var div = document.getElementById('myId');
for(var i = 0; i < 3; i++){
      var img = document.createElement('img');
      div.appendChild(img);
}

Answer 3

我認為您正在附加同一個孩子 3 次。

一個可行的解決方案在這里 -

 const myParent = document.getElementById("someDiv"); const myImg1 = document.createElement("img"); myImg1.src = "https://picsum.photos/200/300"; myParent.append(myImg1); const myImg2 = document.createElement("img"); myImg2.src = "https://picsum.photos/200/300"; myParent.append(myImg2); const myImg3 = document.createElement("img"); myImg3.src = "https://picsum.photos/200/300"; myParent.append(myImg3);

 *{ margin:0; padding:0; box-sizing:border-box; } #someDiv{ width:500px; height:200px; background-color:green; margin:auto; display:flex; } img{ margin-right:10px; }

 <div id = "someDiv"> </div>