如何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 } 

Answer 1

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

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

• Element.update文档

Answer 2

你可以简单地使用：

 fieldNameElement.innerHTML = "My new text!"; 

Answer 3

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

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

要replacediv元素中的文本，请使用所有当前浏览器中提供的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攻击。 如果我们知道它只是文本，我们应该创build一个文本节点，而不是让浏览器parsing它的HTML

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

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

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

Answer 5

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

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

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

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，如果你需要尽可能广泛的浏览器支持，那么这不是一个完整的解决scheme，但在原始使用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”）。text（“Some new text。”）;

Answer 11

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

Answer 12

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

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