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

Question

我需要动态设置 DIV 元素内的文本。最好的、浏览器安全的方法是什么？我有prototypejs和scriptaculous可用。

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

该函数如下所示：

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}

Answer 1

您可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

Answer 2

为 2013 年及以后阅读本文的所有人更新：

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

要替换 div 元素内的文本，请使用

.textContent()

，所有当前浏览器都提供了标准方法。

fieldNameElement.textContent = "New text";

Answer 3

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 的评论是正确的：“field_name”不是一个特别具有描述性的 ID 或变量名称。

Answer 4

我会使用 Prototype 的

update

方法，它支持纯文本、HTML 片段或任何定义

toString

方法的 JavaScript 对象。

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

• Element.更新文档

Answer 5

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

Prototype 的一个漂亮功能是

$('field_name')

与

document.getElementById('field_name')

做同样的事情。用它！ :-)

John Topley 使用 Prototype 的

update

函数的回答是另一个很好的解决方案。

Answer 6

快速的答案是使用innerHTML（或原型的更新方法，几乎是一样的）。 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也不是。

Answer 7

如果您确实希望我们从您上次停下的地方继续，您可以这样做：

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

Answer 8

nodeValue 也是您可以使用的标准 DOM 属性：

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

Answer 9

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

Answer 10

如果您倾向于在网站上开始使用大量 JavaScript，那么 jQuery 可以让 DOM 的使用变得极其简单。

http://docs.jquery.com/Manipulation

使其变得简单： $("#field-name").text("一些新文本。");

Answer 11

如果无法假设结构，请使用innerText - 使用 Text#data 更新现有文本 性能测试

Answer 12

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

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

Answer 13

这是一个简单的 jQuery 方法：

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

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