Javascript - 如何在不擦除输入的同时更改标签的内部文本

Question

我想问一下如何 - 通过Javascript - 在不擦除内部输入标签的情况下更改单选按钮的标签innerText(请参阅下面的代码(。标签内部文本在这里的意思是">按钮-标签-X"。

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

• 文本内容："按钮标签-X">
• 内部文本："按钮标签-X">
• 外文本："按钮标签-X">

然后为他们分配了新的字符串值(例如"按钮标签-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>