当点击图库按钮打开模态框显示对应图片时，若直接移动或重复添加 dom 元素，关闭模态框后原图可能被移除或丢失；正确做法是**仅在模态框内动态创建并插入新 `` 元素，而非移动原有图片节点**。
在您提供的 JSFiddle 示例中，问题根源在于：原始代码很可能通过 appendChild() 将图库中已存在的 元素（如 btn.nextElementSibling）直接移入模态框容器。由于 DOM 节点不能同时存在于两个位置，该图片会从原图库中被“剪切”走，导致关闭模态框后图库显示空白。
✅ 正确解决方案是——每次点击时新建一个 元素，并仅复制其 src 属性值，而非复用或移动原始节点。这样既保证模态框显示正确图片，又完全保留原图库结构不变。
以下是优化后的核心逻辑（已适配您的 HTML 结构）：
buttonsGallery.forEach(btn => {
btn.addEventListener('click', () => {
// 1. 显示模态框
galleryModal.style.display = 'flex';
// 2. 创建独立的 img 元素（不干扰原 DOM）
const modalIMG = document.createElement('img');
modalIMG.src = btn.nextElementSibling.src; // 复制 src，非移动节点
// 3. 清空模态内容区（避免残留旧图）
modalContent.innerHTML = '';
// 4. 插入新创建的图片
modalContent.appendChild(modalIMG);
// 5. 设置样式（推荐提取为 CSS 类，此处为演示）
modalIMG.className = 'modalImgTaken';
modalIMG.style.width = '100%';
modalIMG.style.height = '100%';
modalIMG.style.objectFit = 'contain';
});
});⚠️ 注意事项：
- 永远不要对 nextElementSibling 等已有图片节点调用 appendChild() 到其他容器——这会导致原位置丢失；
- 若需响应式缩放，建议将 .modalImgTaken 样式定义在 CSS 中，而非内联设置，提升可维护性；
- 可进一步增强健壮性：检查 btn.nextElementSibling 是否存在且为
，避免运行时错误；
- 模态框关闭时，只需设 galleryModal.style.display = 'none' 即可，无需操作图片 DOM，因模态框内图片为临时副本，不影响原图库。
总结：DOM 节点移动 ≠ 属性复制。本例的关键认知跃迁在于——展示 ≠ 搬运。通过“新建 + 复制属性”的方式，实现视图隔离与数据保全的双重目标，这是构建可维护图库交互的基础原则。
