Question

当我尝试使用Javascript更新单选按钮标签的innerHTML时，我使用的单选按钮会消失。

这是HTML，您可以看到我在标签内有单选按钮，因此它可以在同一行上。

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

下面是在页面加载时更新标签的innerHTML的Javascript，并且它还删除了单选按钮。我猜这是因为单选按钮位于标签的内部，因此被视为innerHTML的一部分。

firstElement.innerHTML = "It works!";

我的问题是，如何防止单选按钮消失？

我尝试使用包含nextSibling.nodeValue的方法，但是无论何时，nodeValue总是以未定义的形式返回。

Answer 1

向该元素添加一个跨度，并在其上设置文本。

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

在要更改的文本周围添加跨度，然后选择该跨度并仅更改该文本：

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>

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

2 个答案: