如何用JS在指定父ID下的<img>元素后添加<span>元素

云上老周

2026-5-22

嘿，这事儿不难，我给你写两种实现方案，你按需选择就行！

原生JavaScript方案

这是不依赖任何库的纯JS实现，兼容性也不错：

// 先获取目标父容器
const parentContainer = document.getElementById('payment_form_quickpaypayment_payment');

// 防止父元素不存在时执行后续代码报错
if (!parentContainer) {
  console.warn('目标父元素未找到');
  return;
}

// 获取父容器内所有的<img>标签
const imgList = parentContainer.querySelectorAll('img');

// 遍历每个img，在其后插入新的<span>
imgList.forEach(img => {
  // 创建新的span元素
  const newSpan = document.createElement('span');
  
  // 给span设置内容（这里用img的title属性当示例，你可以改成自己需要的文本）
  newSpan.textContent = img.title;
  
  // 可选：给span加样式类，方便后续CSS美化
  newSpan.classList.add('payment-icon-caption');
  
  // 把span插入到img的后面
  img.after(newSpan);
});

代码说明：

先判断父元素是否存在，避免找不到元素时抛出错误
querySelectorAll('img')会精准获取父容器内的所有img标签，不会影响页面其他地方的图片
img.after()是ES6+的语法，直接将新元素插入到当前img的后面，非常直观；如果需要兼容IE这类旧浏览器，可以替换成：
```
img.parentNode.insertBefore(newSpan, img.nextSibling);
```

jQuery方案（如果你项目里已经引入了jQuery）

如果你的项目本来就用了jQuery，代码会更简洁：

// 找到目标父容器内的所有img，逐个插入span
$('#payment_form_quickpaypayment_payment img').each(function() {
  // 创建span并插入到当前img后面
  $('<span>').text($(this).attr('title')).addClass('payment-icon-caption').insertAfter($(this));
});