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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
用javascript连接access数据库的方法
Nov 17 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
你或许不知道的一些npm实用技巧
Jul 04 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
原生JS运动实现轮播图
Jan 02 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读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Django进阶之CSRF的解决
2018/08/01 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
四下基层实施方案
2014/03/28 职场文书
和睦家庭事迹
2014/05/14 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记