JS中innerHTML、outerHTML、innerText、outerText的用法与区别

JS中innerHTML、outerHTML、innerText、outerText的用法与区别1、功能说明:innerHTML设置或获取位于对象起始和结束标签内的HTMLinnerText设置或获取位于对象起始和结束标签内的文本outerHTML设置或获取对象及其内容的HTML形式outerText设置(包括标签)或获取(不包括标签)对象的文本2、示例页面有如下代码:span1span2varinnerHTML=document.getElemen

大家好,又见面了,我是你们的朋友全栈君。

1、功能说明:

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

innerText 设置或获取位于对象起始和结束标签内的文本

outerHTML 设置或获取对象及其内容的HTML形式

outerText 设置(包括标签)或获取(不包括标签)对象的文本

2、示例

页面有如下代码:

<div id="mydiv">
      <span style="color:red">span1</span> span2
</div>
var innerHTML = document.getElementById("mydiv").innerHTML;
var innerText = document.getElementById("mydiv").innerText; //Firefox不支持 
var outerHTML = document.getElementById("mydiv").outerHTML;
var outerText = document.getElementById("mydiv").outerText; //Firefox不支持 
console.info(innerHTML);  //输出<span style="color:red">span1</span> span2
console.info(innerText);  //输出span1 span2
console.info(outerHTML);  //输出<div id="mydiv"><span style="color:red">span1</span>span2</div>
console.info(outerText);  //输出span1 span2

PS: innerHTML是符合W3C标准的属性,而innerText对Firefox是不支持的,因此,尽可能地去使用innerHTML,

而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,

再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

console.info(document.getElementById('mydiv').innerHTML.replace(/<.+?>/gim,''));


查看演示:http://itmyhome.com/js_innerHTML_innerText_differences/

作者:itmyhome

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149339.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • webpack dev server_webpackdevserver配置

    webpack dev server_webpackdevserver配置前言当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-ser

    2022年7月31日
    18
  • list去重 distinct

    list去重 distinct总结下。1.使用java8新特性stream进行List去重publicstaticList<String>delRepeat(List<String>list){List<String>myList=listAll.stream().distinct().collect(Collectors.toList());returnmyList;}2.双重for循环去重(不推荐使用,速度太慢)实际是使用lis…

    2022年5月23日
    56
  • 多年收集的一些稀有软件_魔兽世界野外稀有小宠物

    多年收集的一些稀有软件_魔兽世界野外稀有小宠物QQ:365543212DigitalCanalMultipleLoadFootingv4.51CD(定义出梯形的、带状的或矩形的脚柱的多种负重)DigitalCanalQuickWallv5.71CD(保留墙设计软件,同时拥有卓越的精确性)DigitalCanalSpreadFootingv2.31CD(圆柱体设计软件,可以同时处理10个圆柱体还可以…

    2022年8月24日
    10
  • 微服务架构-实现技术之具体实现工具与框架5:Spring Cloud Feign与Ribbon原理与注意事项

    微服务架构-实现技术之具体实现工具与框架5:Spring Cloud Feign与Ribbon原理与注意事项目录一、SpringCloudFeign概述与工作原理解读(一)服务间调用的几种方式(二)Feign概述二、FeignClent注解剖析+SpringCloudFeign基本功能配置解读(一)@FeignClient注解剖析(二)SpringCloudFeign基本功能配置(三)Feign请求超时问题方法一方法二方法三三、SpringC…

    2022年4月29日
    51
  • uml点餐系统活动图_UML 活动图

    uml点餐系统活动图_UML 活动图•活动图概述活动图概述•活动图和交互图是UML中对系统动态方面建模的两种主要形式•交互图强调的是对象到对象的控制流,而活动图则强调的是从活动到活动的控制流•活动图是一种表述过程基理、业务过程以及工作流的技术。它可以用来对业务过程、工作流建模,也可以对用例实现甚至是程序实现来建模•UML2.0而言,去除了“活动图是状态图的一种特例”这一规定•如何阅读活动图阅读简单活动图活动图的主要元素•初始节点和…

    2022年6月10日
    40
  • Django(44)drf序列化源码分析[通俗易懂]

    Django(44)drf序列化源码分析[通俗易懂]序列化与反序列化一般后端数据返回给前端的数据格式都是json格式,简单易懂,但是我们使用的语言本身并不是json格式,像我们使用的Python如果直接返回给前端,前端用的javascript语言是识

    2022年7月31日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号