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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP代码加密的方法总结
2020/03/13 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python json读写方式和字典相互转化
2020/04/18 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python接入支付宝的实例操作
2020/07/20 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
旅游节目策划方案
2014/05/26 职场文书
相亲大会策划方案
2014/06/05 职场文书
暑期培训班策划方案
2014/08/26 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
Python Socket编程详解
2021/04/25 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS