如何使用JavaScript或jQuery将容器内img替换为包裹strong的div元素

你已经通过document.getElementById('service_preview')拿到了目标容器节点，按照「缓存待处理img节点 → 提取原始src文本 → 构造目标结构 → 替换原img」的逻辑完成操作即可，注意规避动态DOM集合遍历错位、src值被浏览器自动补全的常见坑。

原生JavaScript实现 #

• 核心注意点：如果使用getElementsByTagName获取img列表，返回的是动态HTML集合，DOM节点变动会实时改变集合内容，直接遍历删除会出现漏处理的问题，必须转成静态数组缓存后再操作。优先用querySelectorAll选择，它返回静态节点列表，无动态遍历错位风险。
• 完整代码：

// 筛选容器内所有带alt="image"的img，直接遍历静态节点列表即可
const targetImgs = servicePreview.querySelectorAll('img[alt="image"]');

targetImgs.forEach(imgEl => {
  // 必须用getAttribute拿原始src值，直接读取img.src会得到浏览器自动补全的绝对路径，和你存在属性里的原始文本不一致
  const contentText = imgEl.getAttribute('src');
  // 构造目标结构 <div><strong>对应文本</strong></div>
  const wrapperDiv = document.createElement('div');
  const strongEl = document.createElement('strong');
  // 用textContent赋值，避免特殊字符引发的DOM解析问题
  strongEl.textContent = contentText;
  wrapperDiv.appendChild(strongEl);
  // 用replaceWith替换原img节点，原img会自动从DOM中移除
  imgEl.replaceWith(wrapperDiv);
});

jQuery实现 #

• jQuery会自动处理节点列表的遍历适配，写法更简洁
• 完整代码：

// 选中id为service_preview的容器，查找内部所有带alt="image"的img节点
$('#service_preview').find('img[alt="image"]').each(function () {
  // 用attr方法获取原始src值，避免浏览器自动补全路径的问题
  const contentText = $(this).attr('src');
  // 构造目标结构的新节点，用text方法赋值更安全
  const newNode = $('<div><strong></strong></div>').text(contentText);
  // 替换原有img节点
  $(this).replaceWith(newNode);
});

通用注意事项

• 不要直接读取img.src属性获取值，浏览器会自动把相对路径补全为绝对URL，和你存在src里的原始文本不匹配
• 不要直接拼接带特殊字符的文本到HTML字符串里，优先用textContent、jQuery的text()方法赋值，避免特殊字符引发的DOM解析错误或安全问题
• 上述逻辑只会替换符合alt="image"条件的img节点，容器内的其他原有节点不会被改动，完全匹配替换需求

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