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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jquery实现submit提交表单
Feb 03 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
vue.js watch经常失效的场景与解决方案
Jan 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
PHP的面试题集
2006/11/19 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
7个JS基础知识总结
2014/03/05 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
《伯牙绝弦》教学反思
2014/03/02 职场文书
百年校庆节目主持词
2014/03/27 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
市场推广策划方案
2014/06/02 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers