文档章节

如何在JavaScript中更改span元素的文本

 技术盛宴
发布于 02/29 20:32
字数 745
阅读 77
收藏 0

如果我有跨度,请说:

<span id="myspan"> hereismytext </span>

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


#1楼

对于现代浏览器,您应该使用:

document.getElementById("myspan").textContent="newtext";

尽管较旧的浏览器可能不知道textContent ,但不建议使用innerHTML因为当用户输入新文本时,它会引入XSS漏洞(有关更多详细讨论,请参见下面的其他答案):

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

#2楼

document.getElementById('myspan').innerHTML = 'newtext';

#3楼

不建议使用innerHTML 。 相反,您应该创建一个textNode。 这样,您就可以“绑定”您的文本,并且至少在这种情况下,您不容易受到XSS攻击。

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

正确的方式:

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

有关此漏洞的更多信息: 跨站点脚本(XSS)-OWASP

2017年11月4日编辑:

根据@mumush建议修改了第三行代码:“改为使用appendChild();”。
顺便说一句,根据@Jimbo Jonny所说,我认为应该通过应用“分层安全性”原理将所有内容都视为用户输入。 这样,您就不会遇到任何惊喜。


#4楼

编辑:这是在2014年编写的。您可能不再关心IE8了,可以忘记使用innerText 。 只需使用textContent并完成它,万岁。

如果您是提供文本的用户,而用户(或您无法控制的其他来源)没有提供文本的任何部分,则可以设置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不支持innerText而IE8不支持textContent因此如果要保持跨浏览器的兼容性,则需要同时使用两者。

而且,如果您想尽可能避免回流(由innerText引起):

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}

#5楼

这是另一种方式:

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

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

Safari,Google Chrome和MSIE将检测innerText属性。 对于Firefox而言,标准的处理方式是使用textContent,但自版本45起,它也具有innerText属性,因为最近有人恳求我。 此解决方案进行测试,以查看浏览器是否支持这些属性之一,如果支持,则分配“ newtext”。

现场演示: 这里

本文转载自:https://stackoom.com/question/5hUI/如何在JavaScript中更改span元素的文本

粉丝 0
博文 1557
码字总数 0
作品 0
深圳
高级程序员
私信 提问
加载中

评论(0)

深入理解 React 的 Virtual DOM

React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX、理解和,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用。 这是Cho...

Choerodon
2019/04/16
1.9K
0
JavaScript是如何工作的:渲染引擎和优化其性能的技巧

摘要: 理解浏览器渲染。 原文:JavaScript是如何工作的:渲染引擎和优化其性能的技巧 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其所构建的组件的系...

Fundebug
2019/01/14
0
0
[译] JavaScript 工作原理:渲染引擎及其性能优化

很久没有翻译文章了,最近看到一篇不错的文章,刚好安排上。 原文地址:How JavaScript works: the rendering engine and tips to optimize its performance JavaScript 工作原理:渲染引擎及...

Rick_Lee
2019/11/04
0
0
网站开发进阶(五十四)query获取父级元素、子级元素、兄弟元素的方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82667689 网站开发进阶(五十四)query获取父级元素、子级元素、兄弟元素的方法...

孙华强
2018/09/12
0
0
JavaScript是如何工作的:渲染引擎和优化其性能的技巧

当你构建 Web 应用程序时,你不只是编写单独运行的 JavaScript 代码,你编写的 JavaScript 正在与环境进行交互。了解这种环境,它的工作原理以及它的组,这些有助于你够构建更好的应用程序,...

架构师springboot
2019/01/25
9
0

没有更多内容

加载失败,请刷新页面

加载更多

C/C++ 第五周线性表 项目(一)建立顺序栈的算法库

/* *Copyright(c)2017,烟台大学计算机学院 *All right reserved. *文件名:main.cpp sqstack.h sqstack.cpp *作者:黄士胜 *完成日期:2017年9月28日 *版本号:v1.0 * *问题...

osc_r94nrknb
25分钟前
12
0
怎样用cmd启动停止服务

在cmd下可有两种方法打开,net和sc,net用于打开没有被禁用的服务,语法是: net start 服务名 net stop 服务名 用sc可打开被禁用的服务,语法是: sc config 服务名 start= demand //手动 ...

osc_5zaxkz1e
27分钟前
18
0
kubernetes使用harbor私有仓库

预置 harbor url: https://harbor.test.com:6443 image url: harbor.test.com:6443/test/test-secret:latest namespace: harbor-test 将harbor的ca.crt复制到node的/etc/docker/certs.d/har......

钾肥尔德
27分钟前
22
0
Mac忘记登录密码的解决方法

忘记mac登录密码这个问题如何解决呢?这得看你的Mac有没有开启FileVault,这里先简单介绍一下FileVault。FileVault是苹果系统的一项保密措施,一般刚买的Mac开机时会让你设置是否开启FileVau...

麦克虾仔
28分钟前
17
0
20行实现一个Promise

作者:晨曦时梦见兮 来源: 掘金 前言 在面试的时候,经常会有面试官让你实现一个Promise,如果参照A+规范来实现的话,可能面到天黑都结束不了。 说到Promise,我们首先想到的最核心的功能就是...

JamesView
29分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部