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

【问题标题】：How do I replace text inside a div element?如何替换 div 元素中的文本？
【发布时间】：2020-05-09 12:44:53
【问题描述】：

我需要动态设置 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
}

【问题讨论】：

当分配如下文本时，接受的答案是否符合您的要求：- 这很大。如果这种行为是可取的，那么您可以重新表述问题以匹配吗？
这可以用于 XSS 注入攻击吗？

标签： javascript html dom

【解决方案1】：

你可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

【讨论】：

“静态”文本不应该使用单引号吗？
在 PHP 中，是的。在 JavaScript 中，我认为这并不重要。
在Javascript中，单引号和双引号是可以互换的。
不好的建议，因为文本可能不小心包含类似 HTML 标记的内容
element.innerHTML = "<script>doSomethingMalicious()</script>";不会是个好主意。 element.innerHTML = "& neither will this";

【解决方案2】：

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

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

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

fieldNameElement.textContent = "New text";

【讨论】：

@Legolas 因此两年前写了“当前浏览器”。
谢谢！我正在尝试其他答案，想知道为什么“innerHTML”不起作用。
您可能会考虑详细说明为什么 textContent 是优于 innerHTML 的方法：在不刻意尝试插入 HTML 标记时，它更快、更安全、更合适。

【解决方案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));
}

这样做的好处：

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

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


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

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

【讨论】：

您可以将此技术移植到其他哪些语言？
任何具有 DOM 实现的语言都支持这一点（大多数语言都有 DOM 实现）。
这是一个很好的答案，比我的要好，而且是正确的答案。不过，您可能会考虑整理示例。 'fieldname' 不是函数参数的好名称。事实上，最好为元素 ID 取两个，为内容取另一个，即； elemID，内容
我借用了问题本身的 fieldName 和 ID。
该问题可能使用 field_name 使示例通用。提问者还提到 Prototype 可用但 jQuery 不可用。

【解决方案4】：

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

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

Element.update documentation

【讨论】：

@Aeyoun OP 暗示他们已经在使用 Prototype，所以如果是这样的话，利用它是有意义的。
为什么我只适用于$("field_name").text("new text");
@Drako 你在使用 PrototypeJS 吗？
@Drako 最初的问题和我七年前的回答是针对 PrototypeJS 而不是 jQuery。

【解决方案5】：

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

Prototype 的一个漂亮特性是$('field_name') 与document.getElementById('field_name') 做同样的事情。用它！ :-)

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

【讨论】：

这看起来不像 JavaScript？
不要使用innerHTML。这不是 w3c 的建议并且行为不一致。这被认为是糟糕的风格。
Tom，应该用什么代替（如果你不使用 Prototype）？
Milan，更被接受的方式是遍历子节点，在每个子节点上调用 removeNode(true)，然后附加使用 document.createElement() 或 document.createTextNode() 创建的新节点。如果您需要这样做，我建议您编写一个函数以避免大量输入。
@RaduSimionescu 不，不是。这个问题和答案是关于 Prototype.js，而不是 jQuery。在 Prototype $ 中按 ID 查找项目。它不像 jQuery 那样基于选择器。 api.prototypejs.org/dom/dollar

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

http://docs.jquery.com/Manipulation

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

【讨论】：

Prototype 具有类似的实用功能。

【解决方案11】：

如果你不能假设结构，请使用 innerText - 使用 Text#data 更新现有文本 Performance Test

【讨论】：

【解决方案12】：

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

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

【讨论】：

最好替换节点然后删除它并添加一个新节点作为两个单独的操作。

【解决方案13】：

这是一个简单的jQuery 方式：

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

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

【讨论】：

这似乎是个坏主意 - 如果您的元素包含具有相同文本的子节点，或者您的文本与元素标签名称的一部分匹配怎么办？为什么不直接使用 .text？
我完全同意 James Westgate 的观点，不应该那样做。

【解决方案14】：

在 HTML 中放这个

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

在Javascript中放这个

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

【讨论】：