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

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

1 个答案: