如何使用香草javascript将HTML附加到两个类似的元素？

我有两个这样的元素，

gateway\u 1

和

gateway\u 13

<div class="radio__label content-box">
  <label class="radio__label__primary" for="gateway_${id}">
    Test
  </label>
</div>

试验

我想在

和

之间附加HTML。 简化HTML如下：

<span class="radio__label__accessory">
 <span style="background-image:url(${imgSrc}),none;">${originalText}</span>
</span>

${originalText}

我的代码是：

  function transformLabelContainer(id, imgSrc) {
    const label = document.querySelector(`label[for$=_gateway_${id}]`);
    const originalText = label.innerText;
    const span = document.createElement('span');
    span.className = 'radio__label__accessory';
    span.innerHTML = '<span style="background-image:url(${imgSrc}),none;">${originalText}</span>';
  }

  const labelsToTransform = [
    {
      id: '1',
      imgSrc: 'image.svg'
    },
      id: '13',
      imgSrc: 'image13.svg'
    }
  ];

  labelsToTransform.forEach(label => transformLabelContainer(label.id, label.imgSrc));

函数transformLabelContainer（id，imgSrc）{
const label=document.querySelector（`label[for$=\u gateway\u${id}]`）；
const originalText=label.innerText；
const span=document.createElement（'span'）；
span.className='收音机标签\附件'；
span.innerHTML='${originalText}'；
}
常数标签转换=[
{
id:'1'，
imgSrc:'image.svg'
},
id:'13'，
imgSrc:'image13.svg'
}
];
labelsToTransform.forEach（label=>transformLabelContainer（label.id，label.imgSrc））；

悬停我不知道是什么阻止了它的工作。任何帮助都将不胜感激

---

这是对该问题代码的修改：

您有多个问题：

1-您需要将创建的

span

追加到div：

label.parentNode.appendChild(span);

2-设置该跨度的

innerHTML

时，需要使用模板引号（`````），以便能够使用

${…}

：

span.innerHTML = `<span ...>`;

试验
试验

您是否收到任何错误？

labelsToTransform

中的第二个对象文字缺少大括号。