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

How can I replace this text in an HTML element?

本文关键字：替换 文本 元素 HTML      更新时间：2023-09-26

我有一个字符串显示为"Banana"

我想把它换成"苹果"

这就是我的

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

这是我正在使用的脚本。

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

这就是它的表现。

香蕉苹果

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

我怎么能去掉香蕉，换成苹果？

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

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

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

假设单个textNode:

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

JS Fiddle演示。

或者：

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

JS Fiddle演示。

或者：

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

JS Fiddle演示。

参考文献：

  • CCD_ 2
  • Node.replaceChild()

您不需要新的文本节点，而是需要更改现有的文本节点。

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

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

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

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