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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • VLAN作用概述_发挥三个作用是指哪三个作用

    VLAN作用概述_发挥三个作用是指哪三个作用VLAN作用

    2022年8月5日
    5
  • JAVA的网络编程基础概念建议收藏

    网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯。网络编程中有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输。在TCP/IP协

    2021年12月20日
    40
  • 大道理很多人都懂,只是坚持不下去(浅谈坚持)

    大道理很多人都懂,只是坚持不下去(浅谈坚持)

    2020年11月12日
    171
  • vmware16安装centos8_虚拟机centos6安装教程

    vmware16安装centos8_虚拟机centos6安装教程VMware12安装centOS8(vm虚拟机安装centos8教程)前几天Centos8发布了,尽管他是8的第一个版本,有着许多的bug那么今天我们就在VM12上面安装centOS8吧,8这个图形化界面我个人感觉有点丑首先下载iso文件百度下点击进入官网点击马上获得centos然后选择这个选择离你近的镜像地址,点击下载打开vm12点击新建虚拟机点击下一步,如下图这样…

    2022年10月1日
    0
  • 想自学Java的速来!孙鑫视频教程百度云盘

    想自学Java的速来!孙鑫视频教程百度云盘MySQL数据库最佳学习线路脑图:一、对MySQL的认识认识Mysql数据库下载安装MySQL软件在Linux系统环境下安装MySQLMySOL体系结构与存储引擎MySQL体系结构QueryCache详解存储引擎InnoDB体系结构InnoDB的三大特性.数据库文件参数文件参数类型错误日志文件(errorlog)二进制日志文件(binarylog)慢查询日志(slowlog)全量日志(generallog)审计日志(auditlog)

    2022年5月16日
    33
  • iOS charles 抓包使用[通俗易懂]

    iOS charles 抓包使用[通俗易懂]参考链接:Charles抓包使用教程-MAC-黒貓-博客园部分APP无法代理抓包的原因及解决方法(flutter抓包)-lulianqi15-博客园建议最好从官网下载应用,1个月免费使用,可以使用注册码来激活,链接如下:DownloadaFreeTrialofCharles•CharlesWebDebuggingProxycharles连接手机可以参考链接1,非常详细,珠玉在前,不在赘述;*****连接步骤简述*****下载c.

    2022年6月7日
    86

发表回复

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

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