Question

我想问一下 - 通过Javascript - 如何更改单选按钮的标签innerText （请参阅下面的代码），同时不会消除里面的输入标签。标签innerText在这里意味着＆＃34; Button-Label-X ＆＃34;。

我尝试通过document.getElementsByClassName("radio-label")的元素诊断标签样式，包括

textContent：＆＃34; Button-Label-X＆＃34;
innerText：＆＃34; Button-Label-X＆＃34;
outerText：＆＃34; Button-Label-X＆＃34;

然后为它们分配新的字符串值（例如＆＃34; Button-Label-Y＆＃34;）。然而，所有这些方式导致相同的结果：输入消失，只剩下新值。谁有任何想法？

＆＃13;

<div class="radio">
  <label class="radio-label"><input type="radio" name="optradio"> Button-Label-X </label>
</div>

＆＃13;

当然，我可以通过将输入标签放在标签之外来解决问题，然后一切都解决了。但是，对于这种情况，我必须设置id输入和＆＃34; for：id＆＃34;用于标签。对于05按钮而不是01按钮的情况来说，它变得繁琐。

Answer 1

如果我理解正确，您可以从childNodes访问文字部分。获得后，您可以通过将属性textContent设置为所需文本来更改文本。

像这样：

＆＃13;

function changeLabelText(label, text) {
  var children = label.childNodes;
  [].forEach.call(children, function(child) {
    if (child.nodeType == 3) {
      child.textContent = text;
    }
  });
}

var label = document.querySelector('label');
changeLabelText(label, 'blabla');

＆＃13;

<div class="radio">
  <label class="radio-label"><input type="radio" name="optradio"> Button-Label-X </label>
</div>

＆＃13;

Javascript - 如何在不擦除输入的情况下更改标签的innerText

1 个答案: