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调用activeX获取u盘序列号的代码
Nov 21 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
javascript事件模型介绍
May 31 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
antd design table更改某行数据的样式操作
Oct 31 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读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python Web版语音合成实例详解
2019/07/16 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
秋天的雨教学反思
2014/04/27 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
介绍信范文大全
2015/05/07 职场文书
小学教师读书笔记
2015/07/01 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Vue实现下拉加载更多
2021/05/09 Vue.js
Go语言应该什么情况使用指针
2021/07/25 Golang
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS