以JavaScript形式使用innerHTML

Question

我在此示例中看到了如何使用输入按钮更改id内容，并且工作正常：

例：

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

当我尝试使用它来更新选择或复选框时，它不起作用？ 我可以使用form元素来实现此结果吗？

非工作示例：

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = '2';
}
</script>
<p>Welcome to the site 
<input type="checkbox" id="boldStuff" value="1" /></p> 
<input type='button' onclick='changeText()' value='Change'/>

Answer 1

innerHTML在开始标记和结束标记之间更改HTML。 由于input标签是一个自闭标签（以/>结尾的标签，即使在HTML5中有效，也可以将/放在后面），因此没有innerHTML 。

如果要更改值，只需定位value属性：

document.getElementById('boldStuff').value = '2';

Answer 2

您应该设置元素的checked ，而不是它的innerHtml 。 设置innerHtml等效于：

<input type="checkbox" id="boldStuff" value="1">2</input>

这是无效的HTML。

如果要将复选框设置为选中，请执行以下操作：

document.getElementById('boldStuff').checked = true;

Answer 3

如果要设置值，请设置值 （而不是innerHTML）：

document.getElementById('boldStuff').value = '2';

可以通过这种方式找到大多数属性，其中某些属性必须从element.getAttribute并使用element.setAttribute设置。

Answer 4

要通过innerHTML进行更改，您首先需要具有一个innerHTML值才能进行更改

所以

document.getElementById('***').innerHTML="2";

相应的HTML看起来应与此类似：

<p id="***">some text</p>