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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP实现的简单日历类
2014/11/29 PHP
php四种定界符详解
2017/02/16 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Pytorch释放显存占用方式
2020/01/13 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
高二生物教学反思
2014/01/27 职场文书
小学生安全保证书
2014/02/01 职场文书
给全校老师的建议书
2014/03/13 职场文书
小组口号大全
2014/06/09 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
承租经营合作者协议书
2014/10/01 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
安全承诺书
2015/01/19 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
在人间读书笔记
2015/06/30 职场文书
公司车辆维修管理制度
2015/08/05 职场文书