如何将 append 多个 img-child 元素添加到一个带有 JS 的 DOM 元素中？

Question

I want to add multiple, same img-elements to a div element. Why can't I just use appendChild a couple times?

For instance:

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

will result in

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

But how can I achieve the following?

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

Answer 1

The imgelement needs to be a new instance. If you add the same child, it will do nothing.

 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>

You need to create a new image instance for each append action:

 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

This way should work.

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

Answer 3

I think You are appending same child 3 times.

an working solution is here -

 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>