我怎么替代文本内的一个div元素？

Question

我需要设置文本内的一个部件的动态。什么是最好的，浏览器的安全方法?我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

我会用原型的 update 方法，支持普通的文本，一个HTML段或任何JavaScript对象的定义 toString 法。

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

• 元素。更新的文档

Answer 2

您可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

Answer 3

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

这个答案有很多搜索引擎优化，但所有答案都严重过时，并依赖图书馆来做所有当前浏览器开箱即用的事情。

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

fieldNameElement.textContent = "New text";

Answer 4

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＆QUOT;不是特别描述性的id或变量名。

Answer 5

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

Prototype的一个漂亮功能是 $（'field_name'）与 document.getElementById（'field_name'）完全相同。用它！ ： - ）

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

Answer 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。

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

Answer 9

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

Answer 10

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

http://docs.jquery.com/Manipulation

使其简单如下： $（＆＃“field-name＆quot;）。text（＆quot; Some new text。＆quot;）;

Answer 11

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

Answer 12

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

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

Answer 13

这是一个简单的 jQuery 方式：

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

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