如何替换 div 元素中的文本？

$('field_name').innerHTML = 'Your text.';

Prototype 的一个很好的特性是 $('field_name')和 document.getElementById('field_name')做同样的事情。使用它! : -)

John Topley 使用 Prototype 的 update函数给出的答案是另一个很好的解决方案。

你可以简单地使用:

fieldNameElement.innerHTML = "My new text!";

如果你真的想让我们继续你的工作，你可以这样做:

if (fieldNameElement)
fieldNameElement.innerHTML = 'some HTML';

我将使用 Prototype 的 update方法，它支持纯文本、 HTML 片段或任何定义 toString方法的 JavaScript 对象。

$("field_name").update("New text");

• 译自: 美国《科学》杂志网站(http://www.Prototypejs.org/api/element/update)原著: http://www.Prototypejs.org/api/element/update

function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);


fieldNameElement.removeChild(fieldNameElement.firstChild);
var newText = document.createTextNode("New Text");
fieldNameElement.appendChild(newText);
}

快速的解决方案是使用 innerHTML (或者原型的 update 方法，它们几乎是同样的东西)。InnerHTML 的问题是需要转义所分配的内容。根据您的目标，您将需要使用其他代码或进行此操作

在 IE:-

document.getElementById("field_name").innerText = newText;

在 FF:-

document.getElementById("field_name").textContent = newText;

(实际上 FF 有以下代码存在)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })


HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

现在，如果你需要尽可能广泛的浏览器支持，我可以直接使用 innerText，那么这不是一个完整的解决方案，但也不是原始的使用 innerHTML。

function showPanel(fieldName) {
var fieldNameElement = document.getElementById("field_name");
while(fieldNameElement.childNodes.length >= 1) {
fieldNameElement.removeChild(fieldNameElement.firstChild);
}
fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

这样做的好处:

1. 它只使用 DOM，因此该技术可以移植到其他语言，并且不依赖于非标准的 innerHTML
2. FieldName 可能包含 HTML，这可能是一种尝试的 XSS 攻击。如果我们知道它只是文本，那么我们应该创建一个文本节点，而不是让浏览器解析 HTML

如果我要使用 javascript 库，我会使用 jQuery，然后这样做:

$("div#field_name").text(fieldName);

注意，@ Anthony WJones 的评论是正确的: “ field _ name”不是一个特别描述性的 id 或变量名。

如果您倾向于开始在站点上使用大量 JavaScript，jQuery 使得使用 DOM 变得非常简单。

翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳 http://docs.jquery.com/manipulation

这里有一个简单的 JQuery方法:

var el = $('#yourid .yourclass');


el.html(el.html().replace(/Old Text/ig, "New Text"));

NodeValue 也是可以使用的标准 DOM 属性:

function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
if(fieldNameElement.firstChild)
fieldNameElement.firstChild.nodeValue = "New Text";
}

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

更新于2013年及以后:

这个答案有很多搜索引擎优化，但所有的答案都严重过时，并依赖于库做的事情，所有当前的浏览器都开箱即用。

要替换 div 元素中的文本，使用 Node.textContent，这是所有当前浏览器都提供的

fieldNameElement.textContent = "New text";

在 HTML 中把这个

<div id="field_name">TEXT GOES HERE</div>

在 Javascript 中放入这个

var fieldNameElement = document.getElementById('field_name');
if (fieldNameElement)
{fieldNameElement.innerHTML = 'some HTML';}