js中innerHTML与innerText的用法与区别-阿里云开发者社区

开发者社区> 技术小甜> 正文

js中innerHTML与innerText的用法与区别

简介:
+关注继续查看
用法:
<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>













本文转自terryli51CTO博客,原文链接:http://blog.51cto.com/terryli/519522 ,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
page、pageContext、servletContext的区别
ServletContext是容器上下文,指当前的一个web应用的上下文   JSP网页本身,page对象是当前页面转换后的Servlet类的实例。从转换后的Servlet类的代码中,可以看到这种关系:Object page = this;在JSP页面中,很少使用page对象。
868 0
asp.net中Literal与label的区别
一、方案 Literal 最常用于向页面中动态添加内容。   二、背景 Literal 控件表示用于向页面添加内容的几个选项之一。对于静态内容,无需使用容器,可以将标记作为 HTML 直接添加到页面中。
622 0
HTML5中 基本用法及属性 韩俊强的博客
从今天开始更新H5相关学习:希望大家能一起学习,多学习一门语言,多一门乐趣! 了解Html5: Html5基本属性: html的属性 打开本地(target是否覆盖上一页) 标题1 标题2-clas...
756 0
Loadrunner中web_find和web_reg_find函数的使用与区别
总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find();这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下:一、web_find()函数该函数的作用是“从HTML页面中查找指定的文本字符串”常用参数及含义如下: 1 web_...
887 0
getContextPath、getServletPath、getRequestURI,getRealPath的区别
假定你的web application 项目名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp    则执行下面向行代码后打印出如下结果: 1、 System.out.println(request.getContextPath()); //可返回站点的根路径。
773 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载