问答中心分类: HTML如何使用JavaScript更改span元素的文本?
0
匿名用户 提问 1月 前

如果我有跨度,说:

hereismytext

如何使用JavaScript将“hereismytext”更改为“newtext”?

16 Answers
0
nicooo. 回答 1月 前

使用innerHTML所以不推荐.

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

正确的方法:

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

有关此漏洞的更多信息:跨站点脚本(XSS)-OWASP
2017年11月4日编辑:
根据修改的第三行代码@穆穆什建议:“使用appendChild();而不是”。
顺便说一句,根据@吉姆博·琼尼我认为通过应用分层安全原则,一切都应该被视为用户输入。这样你就不会遇到任何意外。

Trott 回复 1月 前

虽然你对innerHTML需要注意的是,您的解决方案使用innerTextFirefox不支持这一点。quirksmode.org/dom/html它还使用textContent这在IE8中不受支持。您可以通过构造代码来解决这些问题。

mumush 回复 1月 前

使用span.appendChild(txt);相反

Jimbo Jonny 回复 1月 前

这个问题没有涉及用户输入,所以一个笼统的声明innerHTML不推荐是荒谬的。更不用说消毒后仍然可以。应该清理用户输入的想法是所以不相关针对这个具体问题。充其量它值得在结尾写一个小注释“顺便说一句:如果是用户输入,请确保先进行清理,或者使用不需要的X方法”.

ShaneSauce 回复 1月 前

使用appendChild实际上并不改变文本,它只是增加了它。在这里使用您的代码,原始问题的跨度将最终阅读“hereismytextyour cool text”。可能span.innerHTML = "";那孩子呢?

yeah22 回复 1月 前

@吉姆·博琼尼(JimboJonny)在谈到这类已经被浏览了65万次的问题时,OP具体提出的问题完全无关紧要。因此,为了公共安全,我确实认为突出提及XSS漏洞是明智的。

0
Trott 回答 1月 前

编辑:这本书写于2014年。发生了很多变化。你可能不再关心IE8了。Firefox现在支持innerText.
如果您是提供文本的人,并且用户(或您不控制的其他来源)没有提供文本的任何部分,则设置innerHTML可能可以接受:

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

但是,正如其他人所注意到的,如果您不是文本字符串任何部分的源,则使用innerHTML如果您不小心先对文本进行适当的清理,可能会使您遭受诸如XSS之类的内容注入攻击。
如果您使用的是用户输入,这里有一种方法可以安全地执行此操作,同时保持跨浏览器兼容性:

var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';

Firefox不支持innerTextIE8不支持textContent因此,如果你想保持跨浏览器兼容性,就需要同时使用这两种功能。
如果你想避免回流(由innerText)在可能的情况下:

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}
Ben Souchet 回复 1月 前

2022年最新消息:对于那些可能遇到这个答案的人,现在innerTextFirefox支持查看Caniuse状态所以你只能用innerText.而且检查MDM文档看看他们之间的区别innerTexttextContent.

Trott 回复 1月 前

@BenSouchet谢谢。我已经更新了开始答案的警告,包括Firefox信息。如果您认为提供更多信息和/或与他人的链接会有所帮助,请随时进行进一步编辑。

0
Dan 回答 1月 前
document.getElementById('myspan').innerHTML = 'newtext';
Vlad Havriuk 回复 1月 前

如果'newtext'包含用户提供的输入,这将导致XSS漏洞。

0
shellbye 回答 1月 前

我使用Jquery我不知道为什么,上面这些都没有帮助,但这确实奏效了:

$("#span_id").text("new_value");
0
slevy1 回答 1月 前

还有一种方法:

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

innerText属性将由Safari、Google Chrome和MSIE检测。对于Firefox来说,标准的处理方式是使用textContent,但自从版本45以来,它也有了innerText属性,正如最近有人友善地告诉我的那样。该解决方案测试浏览器是否支持这些属性中的任何一个,如果支持,则分配“newtext”。
现场演示:在这里

user3351605 回复 1月 前

Firefox在中实现了innerText支持版本45.