使用Javascript - 如何改变标签的innerText而不是消灭输入

Question

我想问一下如何 - 通过使用Javascript - 以更改标签innerText单选按钮（见下面的代码），而不是消灭输入标签里面有。这里标签innerText的意思是“Button-Label-X”。

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

• 的textContent： “纽扣标签-X”
• 的innerText： “纽扣标签-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>