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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 电容触摸屏GT911、GT928、GT9147的使用

    电容触摸屏GT911、GT928、GT9147的使用一、介绍与硬件连接GT911、GT928、GT9147都属于GT9系列非单层多点触控芯片,他们支持的触控点数不同(GT928支持10个点、GT911支持5个点)、驱动和感应通道也可能不同。可是他们的寄存器和IIC通讯时序是相同的,也就是说驱动程序是兼容的。与主机的接口共有6PIN,分别为:VDD、GND、SCL、SDA、INT、RESET。INT、RESET…

  • petalinux定制Linux流程,petalinux操作步骤

    petalinux定制Linux流程,petalinux操作步骤整体流程安装1)sudodpkg-reconfiguredash在界面中将shell改成bash2)安装依赖库:sudoapt-getinstall-ygccgitmakenet-toolslibncurses5-devtftpdzlib1g-devlibssl-devsudoapt-getinstall-yflexbisonlibselinux1gnupg…

  • Java中char,short,int,long占几个字节和多少位[通俗易懂]

    Java中char,short,int,long占几个字节和多少位[通俗易懂]1.字节:byte:用来计量存储容量的一种计量单位;位:bit2.一个字节等于8位1byte=8bitchar占用的是2个字节16位,所以一个char类型的可以存储一个汉字。整型:byte:1个字节8位-128~127short:2个字节16位int:4个字节32位long:8个字节64位浮点型:float:4个字节32位doub……

  • vue怎么和后端对接_vue搭配什么后端

    vue怎么和后端对接_vue搭配什么后端简单分享一下jeeplus框架部署liunx服务器跨域问题 ,因为我这个是前后端服务器分离所以配置了俩份java后端配置1.跨域后端配置nginx(图-1)上配置 server { listen 80; server_name xxx.xx.xxx; #后端服务域名 #charset koi8-r; #access_log logs/host.access.log main; locatio

  • 经典排序算法 – 基数排序Radix sort

    经典排序算法 – 基数排序Radix sort

  • 微信公众号网页开发,登录授权和微信支付

    微信公众号网页开发,登录授权和微信支付微信公众号的网页开发基本和H5移动端开发一致,主要是涉及到网页授权获取用户信息和使用js-sdk获取微信原生能力支持。开发前准备申请一个测试号:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login用自己微信扫码登录,然后扫码关注当前测试号,这里注意js接口安全域名和网页授权回调域名,需要配置为当前项目地址。使用测试号时用ip即可,但是线上必须是域名。网页授权类似把系统自己的登录体系移除,通过微信授权方式获取微信用户信息。

发表回复

您的电子邮箱地址不会被公开。

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