javascript - 如何使用 vanilla javascript 将 HTML 附加到两个相似的元素？

Question

我有两个这样的元素，gateway_1和 gateway_13 .

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

我想在 </label> 之间附加 HTML和 </div> . 下面是简化的 HTML:

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

我的代码是:

  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));

Hover 我根本想不出是什么阻止了它的工作。任何帮助将不胜感激。

这是对这个问题的代码的修改:How to replace two similar HTML elements with vanilla javascript?

Answer 1

你有多个问题:

1- 您需要附加创建的 span到 div:

label.parentNode.appendChild(span);

2- 当您设置 innerHTML在该跨度中，您需要使用模板引号 (```) 才能使用 ${...} :

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

3- 在您的函数中，您使用此选择器:label[for$=_gateway_${id}]在 gateway 之前有一个下划线，而在您的 HTML 中似乎并非如此。

4- 正如 Bergi 在评论中提到的，您在 labelsToTransform 中缺少花括号常量声明。

固定演示

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>`;
  label.parentNode.appendChild(span);
}

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

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

<div class="radio__label content-box">
  <label class="radio__label__primary" for="_gateway_1">
    Test
  </label>
</div>
<div class="radio__label content-box">
  <label class="radio__label__primary" for="_gateway_13">
    Test
  </label>
</div>