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

Question

我想问一下如何通过 Javascript 更改单选按钮的标签 innerText(见下面的代码)同时不清除输入标签里面。此处的标签 innerText 表示“Button-Label-X”。

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

• textContent: "Button-Label-X"
• innerText :"按钮-标签-X"
• outerText :"按钮-标签-X"

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

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

当然，我可以通过将 input 标签放在 label 之外来解决问题，然后一切都解决了。但是，对于那种情况，我必须为输入设置 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>