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 相关文章推荐
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
JavaScript实现分页效果
Mar 28 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
浅谈小程序globalData的那些事儿
Nov 01 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
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python获取list下标及其值的简单方法
2016/09/12 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python爬虫用mongodb的理由
2020/07/28 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
自主招生自荐信格式
2013/12/03 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
人事部经理岗位职责
2014/03/07 职场文书
初一新生军训方案
2014/05/22 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
红歌会主持词
2015/07/02 职场文书
行为习惯主题班会
2015/08/14 职场文书
观看《信仰》心得体会
2016/01/15 职场文书