Javascript - 如何在不清除输入的情况下更改标签的内部文本

Question

我想问一下如何 - 通过 Javascript - 更改单选按钮的标签 innerText（参见下面的代码）同时不清除内部的输入标签 . Label innerText 这里的意思是“Button-Label-X”。

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

• textContent: "Button-Label-X"
• innerText :"Button-Label-X"
• outerText :"Button-Label-X"

然后为它们分配新的字符串值（例如“Button-Label-Y”）。然而，所有这些方式都会导致相同的结果：输入消失了，只剩下新的值。有人在这里有任何想法吗？

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

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

Answer 1

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

像这样：

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

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