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失效的解决方法
Jun 26 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
短波问题解答
2021/02/28 无线电
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
javascript 闭包疑问
2010/12/30 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python实现移位加密和解密
2019/03/22 Python
pygame实现非图片按钮效果
2019/10/29 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
最新自我评价范文
2013/11/16 职场文书
诚信承诺书模板
2014/05/26 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
成本会计实训报告
2014/11/05 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS