innerText和innerHTML 一些问题分析


Posted in Javascript onMay 18, 2009

其中innerText特性用来修改起始标签和结束标签之间的文本的。例如,假设有个空的<div/>元素,希望将其变成<div>New text for the div.</div>。用DOM实现时,要这么做:
oDiv.appendChild(document.createTextNode("New text for the div."));
这段代码并不难读,但是很冗长。如果使用innerText,只要这么做:
oDiv.innerText = "New text for the div.";
使用innerText,代码更加简洁,并且更容易理解。另外,innerText会自动将小于号、大于号、引号和&符号进行HTML编码,所有是毫不需当心特殊字符:
oDiv.innerText = "New text for the <div/>.";
这一行代码的执行结果是<div>New text for the <div/>.</div>。但如何一定要再元素中包含HTML标签呢?这就是innerHTML所要解决的问题。
应用innerHTML特性,可以直接给元素分配HTML字符串,而不需考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong><em>World</em></div>。使用DOM,要用下面的代码:
var oStrong = document.createElement("strong');
oStrong.appendChild(document.createTextNode("hello"));
var oEm = document.createElement("em");
oEm.appendChild(document.createTextNode("World"));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(""));
oDiv.appendChild(oEm);
而使用innerHTML,代码就变成:
oDiv.innerHTML = "<strong>Hello</strong><em>World</em>";
七行代码一下就变成一行,这就是innerHML的威力!
还可以使用innerText和innerHTML来获取元素的内容。如果元素只包含文本,那么innerText和innerHTML返回相同的值。但是,如果同时包含文本和其他元素,innerText将只返回文本的表示,而innerHTML,将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。

代码 innerText innerHTML
Hello world
"Hello world" "Hello world"
Helloworld
"Hello world" "Helloworld"
"" ""
后,通过将innerText赋值给它自身,表示从指定的元素中删除所有的HTML标签。
oDiv.innerText = oDiv.innerText;
Javascript 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 #Javascript
Js 本页面传值实现代码
May 17 #Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 #Javascript
Javascript 强制类型转换函数
May 17 #Javascript
jQuery live
May 15 #Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 #Javascript
javascript Prototype 对象扩展
May 15 #Javascript
You might like
NOT NULL 和NULL
2007/01/15 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
深入了解Django View(视图系统)
2019/07/23 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
2015年母亲节寄语
2015/03/23 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python