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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
js布局实现单选按钮控件
Jan 17 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绘制一条弧线的方法
2015/01/24 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python continue语句用法实例
2014/03/11 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Form表单及django的form表单的补充
2019/07/25 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
远东集团网络工程师面试题
2014/10/20 面试题
创意婚礼策划方案
2014/05/18 职场文书
民生工作实施方案
2014/05/31 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
消夏晚会主持词
2015/06/30 职场文书
感恩教育主题班会
2015/08/12 职场文书