如何替换DIV元素中的文本?

我会用原型的 update 方法,它支持纯文本、HTML片段或任何定义 toString 方法。

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

• Element.update documentation

您可以简单地使用:

fieldNameElement.innerHTML = "My new text!";

2013年及以后的更新版本:

这个答案有很多SEO,但是所有的答案都严重过时了,并且依赖库来做所有当前浏览器都不需要的事情。

To replace text inside a div element, use Node.textContent, which is provided in all current browsers.

fieldNameElement.textContent = "New text";

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);

注意 @AnthonyWJones' comment 正确:“字段名”不是一个特别的描述性ID或变量名。

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

原型的一个漂亮特征是 $('field_name') 做同样的事 document.getElementById('field_name') . 用它!-)

约翰·托普利使用原型的答案 update 函数是另一个很好的解决方案。

快速的答案是使用innerhtml(或者原型的更新方法,几乎是相同的东西)。InnerHTML的问题是,您需要退出正在分配的内容。根据您的目标,您需要使用其他代码或

在伊江:

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。

如果你真的想让我们继续你离开的地方,你可以这样做:

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

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"));

如果您倾向于在您的站点上开始使用大量的javascript,jquery使得使用DOM变得非常简单。

http://docs.jquery.com/Manipulation

简单如下: $(“字段名”).text(“一些新文本”);

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

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

这是一个简单的例子 jQuery 方式:

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

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

如果不能假定结构,则使用innerText -使用文本数据更新现有文本 Performance Test