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对象模型-执行模型
Apr 28 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
require.js的用法详解
Oct 20 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
js函数和this用法实例分析
Mar 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 dirname()与__FILE__常量的应用
2013/06/24 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php获取linux命令结果的实例
2017/03/13 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Django stark组件使用及原理详解
2019/08/22 Python
python zip()函数使用方法解析
2019/10/31 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
六一亲子活动总结
2014/07/01 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers