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

解决方案

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

原型的妙处之一是$('field_name')与document.getElementById('field_name')具有相同的作用。用它！ :-)

约翰·托普利(John Topley)使用原型的"更新"功能的答案是另一个很好的解决方案。

我们可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

如果我们真的希望我们从我们上次中断的地方继续，则可以执行以下操作：

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

我将使用Prototype的update方法，该方法支持纯文本，HTML代码段或者定义了toString方法的任何JavaScript对象。

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

• Element.update文档

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

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

快速的答案是使用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。

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或者变量名。

如果我们打算在站点上开始使用大量JavaScript，则jQuery使使用DOM变得非常简单。

http://docs.jquery.com/操作

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

这是一种简单的jQuery方式：

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

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

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

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