如何replacediv元素中的文本?

我需要dynamic地设置DIV元素内的文本。 什么是最好的,浏览器安全的方法? 我有prototypejs和scriptaculous可用。

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

以下是该function的外观:

 function showPanel(fieldName) { var fieldNameElement = document.getElementById('field_name'); //Make replacement here } 

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

 $("field_name").update("New text"); 
  • Element.update文档

你可以简单地使用:

 fieldNameElement.innerHTML = "My new text!"; 

2013年及以后的每个人都阅读这个更新:

这个答案有很多的search引擎优化,但所有的答案是严重过时的,并依靠图书馆来做所有现有的浏览器开箱即用的事情。

要replacediv元素中的文本,请使用所有当前浏览器中提供的Node.textContent。

 fieldNameElement.textContent = "New text"; 
 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攻击。 如果我们知道它只是文本,我们应该创build一个文本节点,而不是让浏览器parsing它的HTML

如果我要使用一个JavaScript库,我会使用jQuery,并执行此操作:

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

请注意, @AnthonyWJones的评论是正确的:“field_name”不是一个特别的描述性的id或variables名称。

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

Prototype的一个很好的function是$('field_name')document.getElementById('field_name') 。 用它! 🙂

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

快速的答案是使用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,如果你需要尽可能广泛的浏览器支持,那么这不是一个完整的解决scheme,但在原始使用innerHTML。

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

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

nodeValue也是一个标准的DOM属性,你可以使用:

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

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

http://docs.jquery.com/Manipulation

使其如此简单:$(“#field-name”)。text(“Some new text。”);

 function showPanel(fieldName) { var fieldNameElement = document.getElementById(field_name); fieldNameElement.removeChild(fieldNameElement.firstChild); var newText = document.createTextNode("New Text"); fieldNameElement.appendChild(newText); } 

这里有一个简单的jQuery方法:

 var el = $('#yourid .yourclass'); el.html(el.html().replace(/Old Text/ig, "New Text"));