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动态拼接正则表达式的两种方法
Mar 04 Javascript
JSON格式化输出
Nov 10 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
Vue制作Todo List网页
Apr 26 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
用js简单提供增删改查接口
May 12 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 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
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Puppeteer使用示例详解
2019/06/20 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python3常见函数range()用法详解
2019/12/30 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
英智兴达软件测试笔试题
2016/10/12 面试题
秘书专业自荐信范文
2013/12/26 职场文书
七年级历史教学反思
2014/02/05 职场文书
国庆节演讲稿
2014/05/27 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
入党自传范文2015
2015/06/26 职场文书