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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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
人族 Terran 基本策略
2020/03/14 星际争霸
PHP 文件扩展名 获取函数
2009/06/03 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP pear安装配置教程
2016/05/14 PHP
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
layui文件上传实现代码
2017/05/20 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
2014年社区学雷锋活动总结
2014/03/09 职场文书
导师评语大全
2014/04/26 职场文书
班级读书活动总结
2014/06/30 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
教师病假条范文
2015/08/17 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP