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)


相关推荐

  • ubuntu20.04安装vscode_vs安装路径

    ubuntu20.04安装vscode_vs安装路径Ubuntu安装VScode

  • mshta 反弹shell

    mshta 反弹shell  kali系统准备:  复制以下ruby代码到/usr/share/metasploit-framework/modules/exploits/windows/smb/msh_shell.rb目录(要注意代码缩进哦):###ThismodulerequiresMetasploit:https://metasploit.com/download#Currentso…

  • Linux系统如何解压rar文件

    Linux系统如何解压rar文件1、下载linux版本的rar软件访问官方地址下载最新版本的linux版本rar软件2、解压下载好的安装文件tar-xzpvfrarlinux-x64-610b2.tar.gz3、编译安装进入解压后的rar文件夹,执行make命令cdrarmake4、使用rar命令解压压缩文件rarxdist.rar或者使用unrar命令unraredist.rar5、压缩文件命令raraetc.ra…

  • linux开启ssh命令(linux开启端口命令)

    在使用SSH时,经常会出现用sshsecureshellclient连接linux连接不上:解决方法如下: 如果没安装ssh,其安装过程:1.以root身份登入系统(没登入系统和没有足够的权限都不能安装,晕,这不是废话)2.检查安装系统时是否已经安装SSH服务端软件包: rpm-qa|grepopenssh 若显示结果中包含openssh-serve

  • Spring AOP 切面@Around注解的具体使用

    Spring AOP 切面@Around注解的具体使用@Around注解可以用来在调用一个具体方法前和调用后来完成一些具体的任务。比如我们想在执行controller中方法前打印出请求参数,并在方法执行结束后来打印出响应值,这个时候,我们就可以借助于@Around注解来实现;再比如我们想在执行方法时动态修改参数值等类似功能的注解还有@Before等等,用到了SpringAOP切面思想,SpringAOP常用于拦截器、事务、日志、权限验…

  • 什么是Volatile关键字?

    什么是Volatile关键字?一、Java的内存模型(JMM)在仔细讲解Java的volatile关键字之前有必要先了解一下【Java的内存模型】Java的内存模型简称JMM(JavaMemoryModel),是Java虚拟机所定义的一种抽象规范用来屏蔽【不同硬件】和【操作系统】的【内存访问差异】。让Java程序在各种平台下都能达到一致的内存访问效果。…

发表回复

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

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