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 相关文章推荐
JS常用正则表达式总结
Nov 12 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
react实现点击选中的li高亮的示例代码
May 24 Javascript
webpack打包多页面的方法
Nov 30 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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文件目录基础操作
2014/11/11 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python的移位操作实现详解
2019/08/21 Python
pygame实现成语填空游戏
2019/10/29 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
营业员演讲稿
2013/12/30 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
电气工程自动化求职信
2014/03/14 职场文书
班子四风对照检查材料
2014/08/21 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Python常遇到的错误和异常
2021/11/02 Python