如何替换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元素中的文本,请使用所有当前浏览器中提供的Node.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.update文档

Answer 5

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

Prototype的一个漂亮功能就是$('field_name')做同样的事情document.getElementById('field_name').用它!:-)

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

Answer 6

快速回答是使用innerHTML(或原型的更新方法,这几乎是一样的).innerHTML的问题是您需要转义所分配的内容.根据您的目标,您需要使用其他代码OR

在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.

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