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

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

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

Prototype的一个漂亮特性是

$（'field\u name'）

与

document.getElementById（'field\u name'）

做的事情相同。使用它！：-）

John Topley使用Prototype的

更新功能给出的答案是另一个很好的解决方案。
您可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

如果你真的想让我们继续你刚才说的话，你可以：

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

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

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



快速的答案是使用innerHTML（或prototype的更新方法，其内容几乎相同）。innerHTML的问题是需要转义分配的内容。根据您的目标，您需要使用其他代码或

在IE中：-

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

在FF中：-

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

（实际上，FF的代码中包含以下内容）

现在，如果您需要尽可能广泛的浏览器支持，我可以只使用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));
}

这样做的好处是：

它只使用DOM，因此该技术可以移植到其他语言，并且不依赖于非标准的innerHTML
fieldName可能包含HTML，这可能是试图进行的XSS攻击。如果我们知道它只是文本，我们应该创建一个文本节点，而不是让浏览器为HTML解析它
如果要使用javascript库，我会使用jQuery，并执行以下操作：


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

请注意，这是正确的：“field_name”不是一个特别的描述性id或变量名。
如果您想在站点上开始使用大量JavaScript，jQuery会使DOM的使用变得非常简单


简单到：
$（“#字段名”）.text（“一些新文本”）
 这里有一个简单的方法：

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

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

在2013年及以后的时间里为所有阅读此文章的人更新：

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


如果无法假定结构，请使用innerText
-使用文本数据更新现有文本
在HTML中，将此

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

这看起来不像JavaScript？不要使用innerHTML。这不是w3c的建议，行为不一致。这被认为是不好的样式。Tom，应该使用什么来代替（如果你不使用Prototype）？Milan，更普遍的方法是通过ChildNode循环，在每个节点上调用removeNode（true），然后附加使用document.createElement（）或document.createTextNode（）创建的新节点。如果您需要这样做，我建议您编写一个函数来避免大量的键入。@RaduSimionescu不，它不是。这个问答是关于Prototype.js的，不是关于jQuery的。在Prototype
$
中，通过ID查找项目。它不像jQuery那样基于选择器。单引号不应该用于“静态”文本吗？在PHP中，是的。在JavaScript中，我认为这无关紧要。在JavaScript中，单引号和双引号是可互换的。这是错误的建议，因为文本可能意外地包含类似HTML标记的内容
element.innerHTML=“doSomethingMalicious（）”将不是一个好主意
element.innerHTML=“&this也不会”您可以将此技术移植到哪些其他语言？任何具有DOM实现的语言都支持此功能（大多数语言都有DOM实现）。这是一个很好的答案，比我的答案更好，也是正确的答案。你可以考虑整理这个例子。fieldname’不是函数参数的好名称。事实上，最好采用两种方法，一种用于元素ID，另一种用于内容，即：。；elemID，contentI从问题本身借用了fieldName和ID。问题可能使用field_name使示例通用。提问者还提到Prototype可用，但不是jQuery。Prototype具有类似的实用功能。最好替换节点，然后将其删除并添加一个新节点，作为两个单独的操作。接受的答案在分配文本时是否符合您的要求，如：-这是大的。如果这种行为是可取的，那么您是否可以将问题重新表述为匹配？这是否可以用于XSS注入攻击？这似乎是个坏主意-如果您的元素包含具有相同文本的子节点，或者您的文本与元素标记名的一部分匹配，该怎么办？为什么不直接使用.text？我完全同意James Westgate的观点，他不应该这样做。@Aeyoun的OP暗示他们已经在使用原型，所以如果是这样的话，利用它是有意义的。为什么对我来说只使用
$（“字段名称”）.text（“新文本”）@Drako你在使用PrototypeJS吗？@Drako七年前的原始问题和我的答案是针对PrototypeJS的，而不是jQuery。@Legolas因此在两年前写了“当前浏览器”。谢谢！我在尝试其他答案，想知道为什么“INNERHTML”不起作用。你可以考虑为什么<代码>文本内容< /C>是一个比较好的方法来<代码> INNERHTML：它在没有故意插入HTML标记的情况下更快、更安全、更合适。

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


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

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

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

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

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

fieldNameElement.textContent = "New text";

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

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