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 TextArea字符串长度限制代码集合
Oct 31 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
浅谈javascript中的闭包
May 13 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
JavaScript计算出两个数的差值
Mar 19 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
ADODB类使用
2006/11/25 PHP
PHP中cookies使用指南
2007/03/16 PHP
PHP基础学习小结
2011/04/17 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
php中apc缓存使用示例
2013/12/25 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP Include文件实例讲解
2019/02/15 PHP
srcElement表格样式
2006/09/03 Javascript
prototype.js的Ajax对象
2006/09/23 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
JS实现页面打印功能
2017/03/16 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python 必须了解的5种高级特征
2020/09/10 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
母亲节演讲稿范文
2014/01/02 职场文书
全神贯注教学反思
2014/02/03 职场文书
体育教学随笔感言
2014/02/24 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
毕业典礼邀请函
2015/01/31 职场文书
保送生自荐信
2015/03/06 职场文书
班主任开场白
2015/06/01 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers