Javascript 如何将for循环创建的元素附加到现有div？

我试图将for循环创建的图像从一个div（这里称为sideDiv）拖放到另一个div（这里称为dropZone）。使用当前代码，我得到了一个未捕获的DOMException：未能在“Element”上执行“append”：新的子元素包含父元素，我有点不明白为什么会得到这个。我是一个JavaScript高手，已经在谷歌上搜索了一段时间，但对于如何解决这个问题，我还没有给出太多的答案。我看过一些视频，其中追加的元素是通过使用全局存储的变量追加的，但是由于这些图像是由函数中的for循环生成的，所以我似乎无法访问它们。在此方面的任何帮助都将不胜感激！附件是相关的Javascript

JS小提琴在这里：

const dropZone=document.getElementById（“dropZone”）；
控制台日志（dropZone）；
设sideDiv=document.getElementsByClassName（“比萨配料”）[0]；
常量dragStart=（）=>{
控制台日志（“启动”）；
};
常量dragEnd=（）=>{
控制台日志（“结束”）；
};
常数dragOver=（e）=>{
e、 preventDefault（）；//删除是必需的，否则无法运行删除
控制台。登录（“结束”）；
};
常数dragEnter=（e）=>{
e、 预防默认值（）；
控制台日志（“输入”）；
};
常数dragLeave=（）=>{
控制台日志（“离开”）；
};
恒阻力=（e）=>{
dropZone.append（如target）；
控制台日志（“已删除”）；
};
//放置区域事件侦听器
dropZone.addEventListener（“dragover”，dragover）；
dropZone.addEventListener（“dragenter”，dragenter）；
dropZone.addEventListener（“dragleave”，dragleave）；
dropZone.addEventListener（“drop”，dragDrop）；
//创作图片
const createPictures=（）=>{
for（设i=1；i<10；i++）{
让newImage=document.createElement（“img”）；
setAttribute（“src”，“images/”+[i]+“.jpg”，newImage）；
newImage.classList.add（“浇头”）；
setAttribute（“draggable”、“true”）；
newImage.addEventListener（“dragstart”，（）=>{
newImage.classList.add（“拖动”）；
dragStart（）；
});
newImage.addEventListener（“dragend”，（）=>{
newImage.classList.remove（“拖动”）；
dragEnd（）；
});
sideDiv.appendChild（newImage）；
}
};
创建图片（）；

使其工作的一种方法是在开始拖动时设置一个变量，然后在拖放时访问该变量

let curEl

...

const dragDrop = (e) => {
  dropZone.append(curEl);
  console.log("dropped");
};

...
 newImage.addEventListener("dragstart", () => {
      newImage.classList.add("dragging");
       curEl=newImage
      dragStart();
    });

....

---

太感谢你了，真是太好了！

let curEl

...

const dragDrop = (e) => {
  dropZone.append(curEl);
  console.log("dropped");
};

...
 newImage.addEventListener("dragstart", () => {
      newImage.classList.add("dragging");
       curEl=newImage
      dragStart();
    });

....