以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>