首页 文章

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

提问于
浏览 次
141

我需要动态地在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
}
javascript html dom

13 回答

  • 227

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

    $("field_name").update("New text");
    回复于
  • 73

    你可以简单地使用：

    fieldNameElement.innerHTML = "My new text!";
    回复于
  • 132

    Updated for everyone reading this in 2013 and later:

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

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

    fieldNameElement.textContent = "New text";
    回复于
  • 47
    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或变量名称 .

    回复于
  • 5
    $('field_name').innerHTML = 'Your text.';

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

    John Topley 's answer using Prototype' s update 功能是另一个很好的解决方案 .

    回复于
  • 3

    快速回答是使用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 .

    回复于
  • 1

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

    if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';
    回复于
  • 15

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

    function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}
    回复于
  • 17
    el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
    回复于
  • 0

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

    http://docs.jquery.com/Manipulation

    使其简单如下：$（“＃field-name”） . text（“some new text . ”）;

    回复于
  • 0
    function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}
    回复于
  • 4

    这是一个简单的jQuery方式：

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

el.html(el.html().replace(/Old Text/ig, "New Text"));
    回复于
  • 0

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

    回复于

相关问题