JavaScript中innerHTML,innerText,outerHTML的用法及区别


Posted in Javascript onSeptember 01, 2015

不废话了,请看下文示例介绍。

用法:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>

在JS中可以使用:

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>

innerHTML和innerText如何区分?

示例代码:

<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>

共同点:innerHTML和innerText都会把元素内内容替换掉。

不同点:

1,innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span>
test2 ”。

2,innerText:

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

值得注意的是,innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。

以上就是介绍JavaScript中innerHTML,innerText,outerHTML的用法及区别,希望大家喜欢。

Javascript 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
几行js代码实现自适应
Feb 24 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
Jquery常用的方法汇总
Sep 01 #Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 #Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 #Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 #Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 #Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 #Javascript
jquery实现点击变换导航样式的方法
Aug 31 #Javascript
You might like
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP处理会话函数大总结
2015/08/05 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
详解flask入门模板引擎
2018/07/18 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python实现狄克斯特拉算法
2019/01/17 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
校园安全广播稿
2014/02/08 职场文书
市场营销计划书
2015/01/17 职场文书
给医院的感谢信
2015/01/21 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
python for循环赋值问题
2021/06/03 Python
java开发双人五子棋游戏
2022/05/06 Java/Android
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS