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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
javascript每日必学之继承
Feb 23 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
Vue如何将页面导出成PDF文件
Aug 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命名空间(Namespace)简明教程
2014/06/11 PHP
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
layui 给数据表格加序号的方法
2018/08/20 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
年终自我鉴定
2013/10/09 职场文书
记者岗位职责
2014/01/06 职场文书
合作意向书模板
2014/03/31 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
关于安全的广播稿
2014/10/23 职场文书
初中差生评语
2014/12/29 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
罗马假日观后感
2015/06/08 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
三下乡活动心得体会
2016/01/23 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书