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

I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.

我需要动态地在DIV元素中设置文本。最好的浏览器安全方法是什么?我有prototype和scriptaculous可用。

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

Here's what the function will look like:

这个函数是这样的:

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

13 个解决方案

#1

I would use Prototype's update method which supports plain text, an HTML snippet or any JavaScript object that defines a toString method.

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

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

Element.update documentation
元素。更新文档

#2

212

You can simply use:

你可以简单的使用:

fieldNameElement.innerHTML = "My new text!";

#3

120

Updated for everyone reading this in 2013 and later:

2013年及以后的读者更新:

This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box.

这个答案有很多SEO，但是所有的答案都是过时的，并且依赖于库来做所有当前浏览器都能做的事情。

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

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

fieldNameElement.textContent = "New text";

#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));}

The advantages of doing it this way:

这样做的好处是:

It only uses the DOM, so the technique is portable to other languages, and doesn't rely on the non-standard innerHTML
它只使用DOM，因此该技术可移植到其他语言，不依赖于非标准的innerHTML
fieldName might contain HTML, which could be an attempted XSS attack. If we know it's just text, we should be creating a text node, instead of having the browser parse it for HTML
fieldName可能包含HTML，这可能是XSS攻击的尝试。如果我们知道它只是文本，我们应该创建一个文本节点，而不是让浏览器为HTML解析它

If I were going to use a javascript library, I'd use jQuery, and do this:

如果我要使用javascript库，我会使用jQuery，这样做:

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

Note that @AnthonyWJones' comment is correct: "field_name" isn't a particularly descriptive id or variable name.

注意，@AnthonyWJones的注释是正确的:“field_name”不是一个特别描述性的id或变量名。

#5

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

One of the nifty features of Prototype is that $('field_name') does the same thing as document.getElementById('field_name'). Use it! :-)

Prototype的一个漂亮特性是$('field_name')与document.getElementById('field_name')执行相同的操作。使用它!:-)

John Topley's answer using Prototype's update function is another good solution.

John Topley的答案使用Prototype的更新功能是另一个很好的解决方案。

#6

The quick answer is to use innerHTML (or prototype's update method which pretty much the same thing). The problem with innerHTML is you need to escape the content being assigned. Depending on your targets you will need to do that with other code OR

快速的答案是使用innerHTML(或者原型的更新方法，几乎是一样的东西)。innerHTML的问题是，您需要摆脱被分配的内容。根据您的目标，您需要对其他代码或

in IE:-

在IE中:

document.getElementById("field_name").innerText = newText;

in FF:-

在FF:-

document.getElementById("field_name").textContent = newText;

(Actually of FF have the following present in by code)

(FF有以下代码)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

Now I can just use innerText if you need widest possible browser support then this is not a complete solution but neither is using innerHTML in the raw.

现在，如果您需要最广泛的浏览器支持，那么我可以使用innerText，这不是一个完整的解决方案，但在raw格式中也不使用innerHTML。

#7

If you really want us to just continue where you left off, you could do:

如果你真的想让我们继续你刚才讲到的内容，你可以这样做:

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

#8

nodeValue is also a standard DOM property you can use:

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

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

#9

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

#10

If you're inclined to start using a lot of JavaScript on your site, jQuery makes playing with the DOM extremely simple.

如果您倾向于在站点上使用大量的JavaScript, jQuery使DOM的使用变得极其简单。

http://docs.jquery.com/Manipulation

Makes it as simple as:$("#field-name").text("Some new text.");

使它简单到:$(“#field-name”)。文本(“一些新的文本。”);

#11

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

#12

Here's an easy jQuery way:

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

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

#13

Use innerText if you can't assume structure- Use Text#data to update existing textPerformance Test

如果不能假定结构，则使用innerText——使用文本#数据来更新现有的textPerformance测试。

#1