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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
简述vue中的config配置
Jan 23 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
浅谈javascript错误处理
Aug 11 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
几个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.MVC的模板标签系统(三)
2006/09/05 PHP
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
Python基于select实现的socket服务器
2016/04/13 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python构建图像分类识别器的方法
2019/01/12 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python web框架中实现原生分页
2019/09/08 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
小车司机岗位职责
2013/11/25 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
书香校园活动方案
2014/02/28 职场文书
公司晚会策划方案
2014/05/17 职场文书
工会主席事迹材料
2014/06/03 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
解读Vue组件注册方式
2021/05/15 Vue.js
Python实现双向链表
2022/05/25 Python