JavaScript点击图片触发时无法向image元素追加removeButton段落的问题

• var的作用域陷阱（核心闭包问题）：循环内用var声明的newImage和循环变量i都属于函数作用域，没有块级隔离效果。等5次循环全部执行完成，这些变量的取值会被最后一次循环覆盖，也就是始终指向id为fav5的图片元素。所有绑定的点击回调触发时，读取的都是循环结束后的最终变量值，导致无论点击哪张图，都只会往最后一张图里追加按钮，完全不符合预期。
• DOM节点复用问题：全局仅创建了1个removeButton实例，DOM的appendChild方法如果传入的是已经存在于DOM树中的节点，实际是将节点从原有位置移动到目标位置，而非生成新副本。哪怕解决了闭包问题，也只会出现按钮在不同图片间跳转，不会实现点击对应图片就显示对应移除按钮的效果。
• DOM结构规范问题：同一个id为removebutton的段落如果被追加到多个元素下，会造成页面中重复id的非法DOM结构，违反HTML规范。
• img元素的特性限制：<img>属于HTML定义的空元素（无闭合标签、不支持嵌套子内容），直接给img节点调用appendChild追加内容是完全无法渲染出可见效果的，这也是代码写了但完全没有预期表现的关键原因之一。

调整逻辑为：用块级声明做作用域隔离，每次点击时基于按钮模板生成独立的按钮实例，同时调整节点追加的位置到图片的相对定位父容器下，完整代码示例：

// 原获取5张图片的逻辑可保留
var favImages = new Object();
for (var i = 0; i < 5; i++) {
  // 实际使用时获取每个图片的父容器作为追加目标
  favImages[i] = document.getElementById("fav" + (i + 1)).parentElement;
}

// 抽离按钮模板，不直接复用同一个实例
const removeBtnTemplate = document.createElement("p");
removeBtnTemplate.id = "removebutton";
removeBtnTemplate.innerHTML = "Remove Image";

for (let i = 0; i < 5; i++) {
  // 用块级声明绑定当前循环对应的容器引用，避免被循环覆盖
  const currentWrap = favImages[i];
  currentWrap.addEventListener("click", function() {
    // 避免重复追加按钮
    if (currentWrap.querySelector("#removebutton")) return;
    // 克隆模板生成独立的按钮实例再追加
    const newBtn = removeBtnTemplate.cloneNode(true);
    currentWrap.appendChild(newBtn);
  }, false);
}

样式补充：给每个图片的父容器设置position: relative，给移除按钮设置position: absolute就能实现按钮悬浮在图片上的效果。如果需要兼容不支持let的老旧浏览器，可以用立即执行函数把每次循环的容器引用存在独立闭包中，实现同等的作用域隔离效果。

内容的提问来源于stack exchange，提问作者HappyQuest