javascript - 将单选按钮的文本更改为 html

Question

我想使用 javascript 将单选按钮的文本更改为具有附加 html 标记的文本。例如test进入<a href=#>test</a> 。这可能吗？

这是html

<div class="form-row form-row-wide" id="gift-cards_field">
  <fieldset>
    <legend>Select a gift card</legend>
      <label><input type="radio" name="gift-cards" value="NN001"> NN001</label>
      <label><input type="radio" name="gift-cards" value="NN002"> NN002</label>
      <label><input type="radio" name="gift-cards" value="NN003"> NN003</label>
  </fieldset>
</div>

这是我当前编写的 javascript，它不起作用..

var giftcard = document.getElementsByName("gift-cards");
if(giftcard[0].value === 'NN001'){
    giftcard[0].nextSibling.data = '<a href="#">NN001<img rc="https://www.google.com.sg/logos/doodles/2014/perseid-meteor-shower-2014-6280300325765120-res.png" /></a>'
};

jsfiddle

Answer 1

像这样的事情应该做到这一点

[].slice.call(document.querySelectorAll('[name="gift-cards"]')).forEach(function(item) {
    var wrap  = document.createElement('a'),
        node  = item.nextSibling;

    wrap.href = '#';
    item.parentNode.appendChild(wrap)
    wrap.appendChild(node);
});

FIDDLE

尝试遵循你相当奇怪的例子，它会像

var item = document.querySelector('[name="gift-cards"][value="NN001"]'),
    wrap = document.createElement('a'),
    img  = document.createElement('img'),
    node = item.nextSibling;

wrap.href = '#';
img.src   = 'https://www.google.com.sg/logos/doodles/2014/perseid-meteor-shower-2014-6280300325765120-res.png';

item.parentNode.appendChild(wrap)
wrap.appendChild(node);
wrap.appendChild(img);

FIDDLE