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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
js单例模式的两种方案
Oct 22 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
vue cli 全面解析
2018/02/28 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
一步步教你用Python实现2048小游戏
2017/01/19 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python实现京东秒杀功能
2018/07/30 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
刘胡兰的英雄事迹材料
2014/02/11 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
运动与健康自我评价
2015/03/09 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
国家助学金受助感言
2015/08/01 职场文书