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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
JS代码优化的8点建议
Feb 04 Javascript
用js编写留言板
Mar 17 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下使用无限生命期Session的方法
2007/03/16 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php随机抽奖实例分析
2015/03/04 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue实现计算器功能
2020/02/22 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Django中的Signal代码详解
2018/02/05 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
简历中自我评价分享
2013/10/09 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
庆元旦演讲稿
2014/09/15 职场文书
元旦晚会开场白
2015/05/29 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS