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


相关推荐

  • 判断Python输入是否为数字

    判断Python输入是否为数字判断 user 接收到的字符串是否为数字例如 user 78234 user isdigit str isdigit user 两种写法为 True 表示输入的所有字符都是数字 False 表示不是数字或者不全部为数字 str isalnum 所有字符都是数字或者字母 str isalpha 所有字符都是字母 str isdigit 所有字符都是数字 str islower

    2025年10月16日
    4
  • 计算机网络笔记Part1 概述「建议收藏」

    计算机网络笔记Part1 概述「建议收藏」概述1.速率相关性能指标速率定义:连接在计算机网络上的主机在数字信道上传送数据位数的速率单位:b/s,Kb/s,Mb/s,Tb/s,如果用字节表示,则是B/s,KB/s,MB/s,TB/s1Byte=8Bit带宽在计算机网络中,指的是网络设备所支持的最高速度,单位同速率,是理想条件下最高速率吞吐量指的是单位时间内通过某个网络的数据总量个人理解速率就是实际网速,带宽是理论网速(长城宽带警告),吞吐量是一个或多个设备的综合速率,比如说1000m宽带的路由器连着三部手机,每部手机都是10m

    2022年6月6日
    28
  • Python标准库之time和datetime

    注:博客转载自:https://www.cnblogs.com/zhangxinqi/p/7687862.html1、python3日期和时间Python程序能用很多方式处理日期和时间,转换日期

    2021年12月29日
    47
  • npm 模块 移除_【已解决】npm卸载模块后该模块并没有从package.json中去掉[通俗易懂]

    折腾:期间,遇到一个奇怪的现象:用npmremovexxx或npmuninstallxxx后xxx并没有从package.json中去掉:➜HeadquarterReportgit:(permission-control)✗npmremoveelement-ui–async-validator@1.6.9node_modules/async-validator–babe…

    2022年4月10日
    72
  • 禁止validateRequest的办法

    禁止validateRequest的办法A  potentially  dangerous  Request.Form  value  was  detected  from  the  client  (txtTest=””).  由于在.net中,Request时出现有HTML或Javascript等字符串时,系统会认为是危险性值。立马报错。  解决方案一:    在.aspx文件头中加入这句:        解决方案二:    修

    2022年5月6日
    38
  • PHP环境手动搭建教程

    PHP环境手动搭建教程Windows操作系统下手动搭建PHP环境,新手站长网是以php5.6+MySQL5.6+Apache2.4版本的组合来搭建环境:windows系统手动搭建PHP环境手动安装PHP环境比较麻烦,新手站长网先帮大家梳理下:版本搭配:php5.6+MySQL5.6+Apache2.4 大致流程概述:①下载PHP、MySQL和Apache三款软件;②安装MySQL数据库;③安装和配置Apa…

    2022年6月30日
    23

发表回复

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

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