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 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
vue-iview动态新增和删除的方法
Jun 17 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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代码
2010/08/08 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
js DOM模型操作
2009/12/28 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
python计算方程式根的方法
2015/05/07 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
python脚本和网页有何区别
2020/07/02 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
美术专业个人自我评价
2014/01/18 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
企业管理标语
2014/06/10 职场文书
学校交通安全责任书
2014/08/25 职场文书
见习报告格式要求
2014/11/04 职场文书
建国大业观后感
2015/06/01 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL