使用innerHTML更改p元素的内容

Question

I have the following script:

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来改变？

- adit

---

你有一个或多个“before” div吗？ - karim79

我认为adit只有一个。这里的误解是您需要循环遍历“before” div以访问其子元素。 - Jared Ng

@karim79：我认为代码是错误的。即使他有多个“before”，GEBId也只返回一个。 - naveen

@adit：你可以详细讲解一下，再提供一些代码和标记吗？最好顺便提供一个 fiddle。 - naveen

Answer 1

要访问before_label的innerHTML，只需直接访问即可。

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

- Jared Ng

---

有点愚蠢的问题，但如果我没有将它包含在任何HTML标签中怎么办？有没有一种方法可以修改它？问题是，使用<p>会给我一个额外的换行符/新行。 - adit

你可以随时使用<span>标签来包裹你想要选择的内容。例如：<span id='myelem'>一些文本</span>。 - Jared Ng

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';   
} 

- daniel

Answer 3

为什么要用for循环？直接通过id获取元素即可。

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

- sdleihssirhc