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给input和textarea设定ie中的focus
May 29 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
移动端界面的适配
Jan 11 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
几个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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
js css自定义分页效果
2017/02/24 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python中的随机函数random的用法示例
2018/01/27 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
python和js交互调用的方法
2020/06/23 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
什么是唯一索引
2015/07/05 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
林肯就职演讲稿
2014/05/19 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
python 命令行传参方法总结
2021/05/25 Python
Redis Cluster集群动态扩容的实现
2021/07/15 Redis