innerhtml用法 innertext用法 以及innerHTML与innertext的区别


Posted in Javascript onOctober 26, 2009

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a href="javascript:alert(test.innerText)">inerHTML内容</a> 
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

<html> 
<head></head> 
<frameset frameborder="yes" frameborder="1" rows="40%,*"> 
<frame name="top" src="1.html"> 
<frame name="bottom" src="2.html"> 
</frameset> 
</html> 
<html> 
<head> 
<script language="javascript"> 
function init() 
{ 
var aaa = parent.window.frames[0].document.body.innerHTML; 
alert(aaa); 
} 
</script> 
</head> 
<body> 
<p align="center">nothing</p> 
<p align="center"><input type="button" onclick="init()"; value="click"></p> 
</body> 
</html>

Javascript 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
几个javascript操作word的参考代码
Oct 26 #Javascript
javascript 操作Word和Excel的实现代码
Oct 26 #Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 #Javascript
5款Javascript颜色选择器
Oct 25 #Javascript
11款基于Javascript的文件管理器
Oct 25 #Javascript
JavaScript 三种不同位置代码的写法
Oct 25 #Javascript
JavaScript 事件的一些重要说明
Oct 25 #Javascript
You might like
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python常用模块用法分析
2014/09/08 Python
Python中itertools模块用法详解
2014/09/25 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Pygame框架实现飞机大战
2020/08/07 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
工作说明书格式
2014/07/29 职场文书
道歉信怎么写
2015/05/12 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript