使用Javascript更新单选按钮标签innerHTML后，如何防止单选按钮消失？

Question

The radio button I'm using disappears when I try to update the radio button label's innerHTML using Javascript.

Here is the HTML, as you can see I have the radio button inside the label, so it can be on the same line.

<label for="radio" name="firstElement" id="firstElement">
   <input type="radio" name="radio" id="radio" /> Loading number
</label>

Below is the Javascript that updates the label's innerHTML when the page loads, and it also removes the radio button. I'm guessing that is because the radio button is considered part of the innerHTML since it's inside of the label.

firstElement.innerHTML = "It works!";

My questions is, how do I prevent the radio button from disappearing?

I have tried using the method that includes the nextSibling.nodeValue, but whenever I do, the nodeValue always comes back as undefined.

Answer 1

Add a span to the element, and set the text on it.

 document.querySelector('#firstElementText').innerText = 'It works!'; 

 <label for="radio" name="firstElement" id="firstElement"> <input type="radio" name="radio" id="radio" /> <span id="firstElementText">Loading number</span> </label> 

Answer 2

Add a span around the text you want to change and select that span and change only that text:

 var firstElement = document.getElementById('firstElement').getElementsByTagName('span')[0]; firstElement.innerHTML = "It works!"; 

 <label for="radio" name="firstElement" id="firstElement"> <input type="radio" name="radio" id="radio" /> <span>Loading number</span> </label>