javascript - 如何替换 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
}

score 273 · Accepted Answer

273

您可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

于 2008-09-23T15:41:08.070 回答

score 209 · Accepted Answer

为 2013 年及以后阅读此内容的所有人更新：

这个答案有很多 SEO，但所有答案都严重过时，并且依赖于库来做所有当前浏览器开箱即用的事情。

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

fieldNameElement.textContent = "New text";

score 78 · Accepted Answer


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

这样做的好处是：

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

如果我要使用 javascript 库，我会使用 jQuery，并执行以下操作：


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

请注意，@AnthonyWJones 的评论是正确的：“field_name”不是一个特别具有描述性的 id 或变量名。

score 50 · Accepted Answer

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

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

Element.update 文档

score 18 · Accepted Answer

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

Prototype 的一个很好的特性是它$('field_name')与document.getElementById('field_name'). 用它！:-)

John Topley 使用 Prototype's updatefunction 的回答是另一个很好的解决方案。

score 17 · Accepted Answer

快速的答案是使用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 ，那么这不是一个完整的解决方案，但也不是在 raw 中使用 innerHTML。

score 7 · Accepted Answer

如果你真的希望我们从你离开的地方继续，你可以这样做：

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

score 6 · Accepted Answer

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

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

score 4 · Accepted Answer

4

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

于 2011-11-24T17:07:03.290 回答

score 2 · Accepted Answer

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

http://docs.jquery.com/Manipulation

使它变得如此简单： $("#field-name").text("Some new text.");

score 2 · Accepted Answer

2

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

于 2018-05-27T03:49:06.587 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

这是一个简单的jQuery方法：

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

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

score 0 · Accepted Answer

在 HTML 中把这个

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

在Javascript中把这个

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

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

14 回答 14

Related

Reference