Javascript getelementbyid（）不'；不能在html加载时使用循环

我编写了一个函数，通过尝试获取每个div id来填充index.html中的6个div。我希望在加载页面时发生这种情况

发生的情况是，图像只填充在第6个div中，其中我想要的是将图像加载到id='flip-card'的所有div中

我将“console.log（I）”放在for循环中，以检查循环是否工作。它正在工作，但不知何故不想用图像填充所有div，它只填充最后一个

谁能帮我一下我错过了什么？非常感谢你的帮助

这是我的index.html文件

<div id="container-project-5">
    <h1>MEMORY GAME</h1>
    <div class="container-flip-row">
      <div id="flip-card-1" class="flip-card-spot"></div>
      <div id="flip-card-2" class="flip-card-spot"></div>
      <div id="flip-card-3" class="flip-card-spot"></div>
    </div>
    <div class="container-flip-row">
      <div id="flip-card-4" class="flip-card-spot"></div>
      <div id="flip-card-5" class="flip-card-spot"></div>
      <div id="flip-card-6" class="flip-card-spot"></div>
    </div>
  </div>

<script src="loadimage.js"></script>

记忆游戏

这是我的js文件

function loadImage() {
  let img = document.createElement("img");
  img.src = "https://static8.depositphotos.com/1000792/861/v/950/depositphotos_8614495-stock-illustration-fun-zoo-koala.jpg";
  
  img.setAttribute("width", "150px");
  img.setAttribute("height", "150px");
  
  //THIS loop SUPPOSE to FILL ALL the <div> with id 'flip-card' BUT SOMEHOW it ONLY FILL the 6th <div> which is <div id='flip-card-6" class='flip-card-spot'>
  for (let i = 1; i <= 6; i++) {
    document.getElementById("flip-card-" + i).appendChild(img);
    //this is console log to check if for-loop is working
    console.log(i);
  }
}

//LOAD FUNCTION when BROwSER is LOADED
window.addEventListener("load", loadImage);

函数loadImage（）{
设img=document.createElement（“img”）；
img.src=”https://static8.depositphotos.com/1000792/861/v/950/depositphotos_8614495-stock-illustration-fun-zoo-koala.jpg";
img.setAttribute（“宽度”，“150px”）；
img.setAttribute（“高度”，“150px”）；
//此循环假设使用“flip card”填充所有id，但不知何故，它只填充第6个id，即每次附加相同的图像元素。将创建元素的代码也移动到循环中，以便您创建多个元素，或者使用
cloneNode
document.getElementById（“flip card-”+i）.appendChild（img）；
将导致一个
从一个元素移动到另一个元素…appendChild将元素移动到新位置-也许您需要
。appendChild（img.cloneNode（））
它就像一个符咒！谢谢您的回答
<style>

.flip-card-spot {
  display: flex;
  margin: 1px;
  background-color: green;
  width: 150px;
  height: 150px;
}

.container-flip-row {
  display: flex;
}

</style>