如何在 HTML 元素中替换此文本？答案

【问题标题】：How can I replace this text in an HTML element?如何在 HTML 元素中替换此文本？
【发布时间】：2014-04-05 02:39:39
【问题描述】：

我有一个字符串显示“香蕉”

我想用“苹果”代替它

这就是我所拥有的

<span id="Fruit">Banana</span>

这是我正在使用的脚本。

    var td1 = document.getElementById('Fruit');
    var text = document.createTextNode("Apple");
    td1.appendChild(text);

这就是它的显示方式。

香蕉苹果

    <span id="Fruit">
    "Banana"
    "Apple"
    </span>

我怎样才能摆脱 Banana 并用 Apple 代替它？

<span id="Fruit">Apple</span>

【问题讨论】：

标签： javascript html dom dom-manipulation

【解决方案1】：

只需更新innerHTML：http://jsfiddle.net/SNtmL/

document.getElementById('Fruit').innerHTML = "Apple";

【讨论】：

【解决方案2】：

假设单个textNode：

var td1 = document.getElementById('Fruit'),
    text = document.createTextNode("Apple");
td1.replaceChild(text,td1.firstChild);

JS Fiddle demo.

或者：

var td1 = document.getElementById('Fruit');
td1.firstChild.nodeValue = 'Apple';

JS Fiddle demo.

或者：

var td1 = document.getElementById('Fruit'),
    text = 'textContent' in document ? 'textContent' : 'innerText';
td1[text] = 'Apple';

JS Fiddle demo.

参考资料：

Node.nodeValue。
Node.replaceChild()。

【讨论】：

【解决方案3】：

你不想要一个新的文本节点，你想改变现有的。

一个快速而肮脏的解决方案是：

document.getElementById("Fruit").innerHTML = "Apple";

【讨论】：

不知道为什么它没有显示任何编辑，但这不是你的原始答案，你复制了 smerny 的答案......
@plalx：首先，同一作者在前五分钟内的编辑会自动合并。其次，没错，这不是我的“原始”答案，但是，我没有从任何人那里复制任何东西。我只是重读了这个问题，并认为这是最好的答案。而不是我之前拥有的。

【解决方案4】：

为了更有效地从父节点中删除所有节点，您始终可以使用while() 条件：

var td1 = document.getElementById("Fruit"), text = document.createTextNode("Apple");
while(td1.hasChildNodes()) {
    td1.removeChild(td1.firstChild);
}
td1.appendChild(text);

【讨论】：