使用 innerHTML 更改 p 元素的內容

Question

我有以下腳本：

var before = document.getElementById('before');    
if (switchElement.value == 'single'){
    for (var i=0; i < before.length; i++) {
        if (before[i].id == "before_label") {
            before[i].innerHTML = 'Image';
            break;
        }
    }
    after.style.display = 'none';   
} 

HTML 看起來像：

<div id="before">
    <p id="before_label"> Before Image: </p>
    <input type="file" name="before"  size="40">
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
</div>

想知道為什么它不起作用並將內部 html 更改為更改？

Answer 1

要訪問before_label的innerHTML ，只需直接訪問它：

document.getElementById('before_label').innerHTML = 'Image';

Answer 2

getElementById 只返回一個元素。 您需要通過 childNodes 訪問子對象。

嘗試這個：

var before = document.getElementById('before').childNodes;    
if (switchElement.value == 'single'){
    for (var i=0; i < before.length; i++) {
        if (before[i].id == "before_label") {
            before[i].innerHTML = 'Image';
            break;
        }
    }
    after.style.display = 'none';   
} 

Answer 3

為什么是for循環？ 只需通過其 id 獲取元素：

var before_label = document.getElementById('before_label');
if (switchElement.value == 'single') {
    before_label.innerHTML = 'Image';
    after.style.display = 'none';
}