替换html中text的值,javascript - 如何替换div元素中的文本？

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

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

TEXT GOES HERE

这是函数的样子：

function showPanel(fieldName) {

var fieldNameElement = document.getElementById('field_name');

//Make replacement here

}

sblundy asked 2019-05-18T07:05:52Z

13个解决方案

227 votes

你可以简单地使用：

fieldNameElement.innerHTML = "My new text!";

17 of 26 answered 2019-05-18T07:06:30Z

130 votes

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

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

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

fieldNameElement.textContent = "New text";

mikemaccana answered 2019-05-18T07:07:11Z

73 votes

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的注释是正确的：“field_name”不是特别描述性的id或变量名。

Daniel Papasian answered 2019-05-18T07:08:06Z

47 votes

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

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

Element.update文档

John Topley answered 2019-05-18T07:06:11Z

17 votes

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

Prototype的一个漂亮功能是$('field_name')与update完全相同。使用它！:-)

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

ceejayoz answered 2019-05-18T07:08:39Z

15 votes

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

AnthonyWJones answered 2019-05-18T07:09:33Z

5 votes

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

if (fieldNameElement)

fieldNameElement.innerHTML = 'some HTML';

Milan Babuškov answered 2019-05-18T07:09:58Z

4 votes

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

function showPanel(fieldName) {

var fieldNameElement = document.getElementById(field_name);

if(fieldNameElement.firstChild)

fieldNameElement.firstChild.nodeValue = "New Text";

}

palswim answered 2019-05-18T07:10:24Z

3 votes

el.innerHTML='';

el.appendChild(document.createTextNode("yo"));

Adrian Adkison answered 2019-05-18T07:10:43Z

1 votes

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

[http://docs.jquery.com/Manipulation]

使它简单如下：$(“＃field-name”)。text(“some new text。”);

Steve Perks answered 2019-05-18T07:11:24Z

0 votes

function showPanel(fieldName) {

var fieldNameElement = document.getElementById(field_name);

fieldNameElement.removeChild(fieldNameElement.firstChild);

var newText = document.createTextNode("New Text");

fieldNameElement.appendChild(newText);

}

Holly Styles answered 2019-05-18T07:11:42Z

0 votes

这是一个简单的jQuery方式：

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

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

Cosmin answered 2019-05-18T07:12:09Z

0 votes

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

Youth overturn answered 2019-05-18T07:12:37Z