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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
JS实现拖动示例代码
Nov 01 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
JS如何把字符串转换成json
Feb 21 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
图书管理程序(二)
2006/10/09 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
基于python实现微信模板消息
2015/12/21 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
国贸专业自荐信范文
2014/03/02 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
护士节慰问信
2015/02/15 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL