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 27 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
javascript读取xml
2006/11/04 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python实现打砖块游戏
2020/02/25 Python
python缩进长度是否统一
2020/08/02 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
施工资料员的岗位职责
2013/12/22 职场文书
对标管理实施方案
2014/03/12 职场文书
物流专业自荐信
2014/05/23 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
小王子读书笔记
2015/06/29 职场文书
2015年暑假生活总结
2015/07/13 职场文书
放假通知怎么写
2015/08/18 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Python实现8种常用抽样方法
2021/06/27 Python
Go语言grpc和protobuf
2022/04/13 Golang