CODEWITHSUNDEEP
javascript
curious
curious

Reputation: 831

How to attach HTML to two similar elements with vanilla javascript?

I have two such elements, gateway_1 and gateway_13.

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

I would like to attach HTML between </label> and </div>. Simplified HTML below:

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

My code is:

  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 I can't figure what stopping it from working at all. Any help would be greatly appreciated.

This is a modification of code from this question: How to replace two similar HTML elements with vanilla javascript?

Upvotes: 1

Views: 44

Answers (1)

blex
blex

Reputation: 25659

You have multiple problems:

1- You need to append the created span to the div:

label.parentNode.appendChild(span);

2- When you set the innerHTML of that span, you need to use templating quotes (```) to be able to use ${...}:

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

3- In your function, you use this selector: label[for$=_gateway_${id}] which has an underscore before gateway, while this does not seem to be the case in your HTML.

4- As Bergi mentioned in the comments, you are missing a curly brace in the labelsToTransform constant declaration.

Fixed demo

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>

Upvotes: 1

Related Questions