点击切换大图JS问题：innerHTML未替换反而新增图片标签

你遇到的问题核心在于对innerHTML的作用对象理解有误：你选中的目标元素本身就是<img class="product__img__accessory">，而<img>是HTML里的空元素（void element）——这类元素按照规范不能包含任何子内容。当你尝试给它的innerHTML赋值新的<img>标签时，浏览器不会把新标签替换掉原来的img，而是会把新标签解析成原img的兄弟节点，直接插在它后面，这就是为什么页面会出现两个img标签的原因。

根据你的需求（保留srcset响应式特性），推荐两种更合适的处理方式：

方案1：直接更新现有img的属性（高效优先） #

不需要重新创建img标签，直接修改现有img的src、srcset、alt属性即可，既保留响应式，又避免DOM结构混乱：

const handleClickLink = e => {
  e.preventDefault();
  
  const $link = e.currentTarget;
  const src = $link.querySelector(`img`).getAttribute(`src`);
  const src2 = src.replace('_thumb', '_big');
  const newSrc = src2.substring(0, src2.lastIndexOf('.'));
  
  // 选中目标img元素
  const targetImg = document.querySelector('.product__img__accessory');
  
  // 更新响应式相关属性
  targetImg.src = `${newSrc}.jpg`;
  targetImg.srcset = `${newSrc}.jpg 384w, ${newSrc}@1.5x.jpg 576w, ${newSrc}@2x.jpg 768w`;
  targetImg.alt = "ddd";
  
  // 保持pushState逻辑不变
  const path = window.location.href.split('?')[0];
  const qs = $link.getAttribute(`href`).split('?')[1];
  window.history.pushState({}, '', `${path}?${qs}`);
};

方案2：替换父元素内容（适合需要完全重建img的场景） #

如果你确实需要通过HTML字符串重新生成img标签，那么应该选中img的父容器（比如你的<section id="product-image">），替换父容器内的对应内容，确保完全替换掉原来的img：

const handleClickLink = e => {
  e.preventDefault();
  
  const $link = e.currentTarget;
  const src = $link.querySelector(`img`).getAttribute(`src`);
  const src2 = src.replace('_thumb', '_big');
  const newSrc = src2.substring(0, src2.lastIndexOf('.'));
  
  // 选中包含img的section容器
  const productSection = document.getElementById('product-image');
  // 保留原有的h2标题
  const titleElement = productSection.querySelector('.product__title');
  
  // 替换section内的内容：保留标题 + 新的img
  productSection.innerHTML = `
    ${titleElement.outerHTML}
    <img class="product__img__accessory" 
         srcset="${newSrc}.jpg 384w, ${newSrc}@1.5x.jpg 576w, ${newSrc}@2x.jpg 768w" 
         sizes="25vw" 
         src="${newSrc}.jpg" 
         alt="ddd" />
  `;
  
  // 保持pushState逻辑不变
  const path = window.location.href.split('?')[0];
  const qs = $link.getAttribute(`href`).split('?')[1];
  window.history.pushState({}, '', `${path}?${qs}`);
};

• HTML的空元素（如<img>、<input>、<br>等）不能包含子节点，使用innerHTML给它们赋值会被浏览器解析为兄弟节点插入，而非替换自身。
• 对于img这类需要更新响应式属性的场景，直接修改元素属性是最简洁高效的方式，比重新生成DOM节点性能更好。

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