innerHTML、innerText和outerHTML、outerText的区别

1、区别描述如下: 

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本

innerText和outerText在获取时是相同效果,但在设置时,innerText仅设置标签内的文本,而outerText设置包括标签在内的文本。 



2、示例代码 

Html代码  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>  <script language="JavaScript" type="text/javascript">   //.innerHTML  function innerHTMLDemo()  {   test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";   }   //.innerText  function innerTextDemo()  {   test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";   }   //.outerHTML  function outerHTMLDemo()  {   test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   }  //.outerText  function outerTextDemo()  {   test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";   }  </script>   </head>   <body>   <ul>   <li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li>   <li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li>   <li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li>   <li id="test_id4" οnclick="outerTextDemo()">outerText效果.</li>   </ul>   </body>   </html>  



3、不同之处:  


   简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于: 
  1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。 
  2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。 
    对于一个id为"testdiv"的div来说,outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来:



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/545048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Socket粘包问题终极解决方案—Netty版(2W字)!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;上一篇我们写了《Socket粘包问题的3种解决方案》&#xff0c;但没想到评论区竟然炸了。介于大家的热情讨论&#xff0c;以及…

Java高质量代码之 — 泛型与反射

在Java5后推出了泛型,使我们在编译期间操作集合或类时更加的安全,更方便代码的阅读,而让身为编译性语言的Java提供动态性的反射技术,更是在框架开发中大行其道,从而让Java活起来,下面看一下在使用泛型和反射需要注意和了解的事情 1.Java的泛型是类型擦除的 Java中的泛型是…

Java LocalDate类| isLeapYear()方法与示例

LocalDate类isLeapYear()方法 (LocalDate Class isLeapYear() method) isLeapYear() method is available in java.time package. isLeapYear()方法在java.time包中可用。 isLeapYear() method is used to check whether the year field value is a leap year or not based on …

Redis 消息队列的三种方案(List、Streams、Pub/Sub)

现如今的互联网应用大都是采用 分布式系统架构 设计的&#xff0c;所以 消息队列 已经逐渐成为企业应用系统 内部通信 的核心手段&#xff0c;它具有 低耦合、可靠投递、广播、流量控制、最终一致性 等一系列功能。当前使用较多的 消息队列 有 RabbitMQ、RocketMQ、ActiveMQ、K…

JavaScript的求模、取整、小数的取舍

js 求模、整除 主要方法是参考JavaScript Math 对象&#xff0c;列举两个常用方法&#xff1b; floor(x)&#xff1a;对数进行下舍入。 round(x)&#xff1a;把数四舍五入为最接近的整数。 更详细的&#xff1a;http://www.w3school.com.cn/js/jsref_obj_math.asp <spa…

c struct 对齐_C中的struct大小| 填充,结构对齐

c struct 对齐What we know is that size of a struct is the sum of all the data members. Like for the following struct, 我们知道的是&#xff0c; 结构的大小是所有数据成员的总和 。 对于以下结构&#xff0c; struct A{int a;int* b;char c;char *d;};Size of the st…

超3000岗位!腾讯产业互联网新年大扩招!

虽然离春节仅剩 1 个月的时间&#xff0c;大厂依旧没有停止招人。就在上周&#xff0c;腾讯官宣新年大扩招&#xff0c;放出 3000 多个岗位需求&#xff01;我们查看了腾讯的招聘数据发现&#xff0c;除了大量招聘运营人员&#xff0c;你猜&#xff0c;他们还在批量招聘什么岗位…

js中的弹窗alert、confirm和prompt

转载&#xff1a;http://blog.csdn.net/cui_angel/article/details/7784211 alert() 弹出个提示框 &#xff08;确定&#xff09; confirm() 弹出个确认框 &#xff08;确定&#xff0c;取消&#xff09; prompt() 弹出个输入框 让你输入东西 使用消息框 使用警告、提示和…

骚操作,IDEA防止写代码沉迷插件 !

当初年少懵懂&#xff0c;那年夏天填志愿选专业&#xff0c;父母听其他长辈说选择计算机专业好。从那以后&#xff0c;我的身上就有了计院深深的烙印。从寝室到机房&#xff0c;从机房到图书馆&#xff0c;C、C、Java、只要是想写点自己感兴趣的东西&#xff0c;一坐就是几个小…

mcq 队列_MCQ | 基础知识 免费和开源软件| 套装3

mcq 队列Q1. What do you understand from GNOME and KDE? Q1。 您从GNOME和KDE了解到什么&#xff1f; Linux Distribution Linux发行版 Command Lines 指令行 GUI Based Linux 基于GUI的Linux File Framework 文件框架 Answer: c. GUI Based Linux 答&#xff1a; c。 基于…

css属性 content

对css一直没有很系统得学习过,练习得也不是很多,纯小白.今天在写一个页面的时候,遇到一个问题,就是如何让外面的盒子适应里面的盒子大小,完美地把小盒子包在里面. 由于里面是一个列表 ul,为了让元素横排,我使用了float:right这个属性,所以列表悬浮了.如图: 其实当然可以直接给外…

js时间延迟执行函数

setTimeout(yourFunction(),5000); 5秒后执行yourFunction(),只执行一次 var tsetTimeout("javascript语句",毫秒) clearTimeout(t); 取消setTimeout() setInterval(yourFunction(),5000); 每隔5秒执行一次 如果在yourFunction()中再次调用了setTimeo…

一文汇总 JDK 5 到 JDK 15 中的牛逼功能!

前言JDK 16 马上就要发布啦&#xff08;预计 2021.3.16 日发布&#xff09;&#xff0c;所以在发布之前&#xff0c;让我们先来回顾一下 JDK 5-15 的新特性吧&#xff0c;大家一起学起来~Java 5 新特性1. 泛型泛型本质是参数化类型&#xff0c;解决不确定具体对象类型的问题。L…

Tomcat 6.0 简介

本片翻译来自&#xff1a;http://tomcat.apache.org/tomcat-6.0-doc/introduction.html 介绍 无论是开发者还是tomcat管理员在使用前都需要了解一些必要的信息&#xff0c;本篇简单的介绍tomcat中的一些术语和概念。比如context是web应用的意思。CATALINA_HOME 在文档中&#x…

JavaScript编写了一个计时器

初学JavaScript&#xff0c;用JavaScript编写了一个计时器。 设计思想&#xff1a; 1、借助于Date()对象&#xff0c;来不断获取时间点&#xff1b; 2、然后用两次时间点的毫秒数相减&#xff0c;算出时间差&#xff1b; 3、累加时间差&#xff0c;这样就能把计时精确。 ps…

Docker部署SpringBoot的两种方法,后一种一键部署超好用!

作者 | LemonSquash来源 | cnblogs.com/npeng/p/14267007.html1.手工方式1.1.准备Springboot jar项目将项目打包成jar1.2.编写DockerfileFROM java:8 VOLUME /tmp ADD elk-web-1.0-SNAPSHOT.jar elk.jar EXPOSE 8080 ENTRYPOINT ["java","-Djava.security.egdfi…

用JavaScript将字符串中的单词大写

String in JavaScript is a sequence of characters. And capitalizing characters of words in a JavaScript string will change each character of the string with the capital letter of it. JavaScript中的字符串是字符序列。 而将JavaScript字符串中的单词大写会更改字…

UISwitch 添加 标签

给UISwitch添加一个标签。左右滑动时候出现开关标签内容。 代码&#xff1a; // // UISwitchJGLabel.h // JGSwitch // // Created by sl on 15/4/11. // Copyright (c) 2015年 Madordie. All rights reserved. // // // 说明&#xff1a; // 1.给UISwitch添加开关标…

爱了!蚂蚁开源的“SpringBoot”框架,新增了这6项功能...

SOFABoot 是蚂蚁金服开源的基于 Spring Boot 的研发框架&#xff0c;它在 Spring Boot 的基础上&#xff0c;提供了诸如 Readiness Check&#xff0c;类隔离&#xff0c;日志空间隔离等等能力。在增强了 Spring Boot 的同时&#xff0c;SOFABoot 提供了让用户可以在 Spring Boo…

JS关键字和保留字汇总

转载&#xff1a;http://www.itxueyuan.org/view/6627.htmlECMA-262 描述了一组具有特定用途的关键字。这些关键字可用于表示控制语句的开始或结束&#xff0c;或者用于执行特定操作等。按照规则&#xff0c;关键字也是语言保留的&#xff0c;不能用作标识符。以下就是ECMAScri…