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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
PHP XML数据解析代码
2010/05/26 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Javascript 类型转换方法
2010/10/24 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python实现的字典值比较功能示例
2018/01/08 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
给面试官的感谢信
2014/02/01 职场文书
保护母亲河倡议书
2014/04/14 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
医德医风个人总结
2015/02/28 职场文书
民事答辩状格式范文
2015/05/21 职场文书
高中运动会前导词
2015/07/20 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
解除租赁合同协议书
2016/03/21 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android