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


相关推荐

  • egret 音乐播放

    egret 音乐播放播放背景音乐 exportlet curBgMusic egret Sound null exportlet curBgMusicUr string null exportlet curBgMusicCh egret SoundChannel null exportfuncti url

    2025年10月8日
    3
  • 配置路由器总结归纳

    配置路由器总结归纳

    2021年6月18日
    145
  • 如何零基础开始自学Python编程「建议收藏」

    如何零基础开始自学Python编程「建议收藏」转载——原作者:赛门喵链接:https://www.zhihu.com/question/29138020/answer/1411702420.明确目标我是真正零基础开始学Python的,从一

    2022年7月5日
    22
  • curl 模拟 GET\POST 请求,以及 curl post 上传文件「建议收藏」

    curl 模拟 GET\POST 请求,以及 curl post 上传文件「建议收藏」curl模拟GET\POST请求,以及curlpost上传文件一般情况下,我们调试数据接口,都会使用一个postman的工具,但是这个工具还是有点大了。事实上,我们在调试一些小功能的时候,完全没有必要使用它。在命令行中,我们使用curl这个工具,完全可以满足我们轻量的调试要求。下面,我们来简单的说一下,curl的一些常见使用方法:curlGET请求cu…

    2022年10月18日
    2
  • mysql中TIMESTAMPDIFF简单记录

    mysql中TIMESTAMPDIFF简单记录1.  SyntaxTIMESTAMPDIFF(unit,begin,end);根据单位返回时间差,对于传入的begin和end不需要相同的数据结构,可以存在一个为Date一个DateTime2.Unit支持的单位有MICROSECOND SECOND 秒MINUTE 分钟HOUR  小时DAY  天WEEK 星期MONTH 月QUARTER 季度YEAR 年3.Examp…

    2022年5月22日
    30
  • ViewStub基本用法「建议收藏」

    ViewStub基本用法「建议收藏」在开发应用程序的时候,经常会遇到这样的情况,会在运行时动态根据条件来决定显示哪个View或某个布局。那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为View.GONE,然后在代码中动态的更改它的可见性。这样的做法的优点是逻辑简单而且控制起来比较灵活。但是它的缺点就是,耗费资源。虽然把View的初始可见View.GONE但是在Inflate布局的时候View仍然会被Infl…

    2022年6月28日
    24

发表回复

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

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