区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

示例代码

<!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" onclick="innerHTMLDemo()">innerHTML效果.</li>

　　<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>

　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>

　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>

　　</ul>

　　</body>

　　</html>

不同之处:　

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于： 
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 

innerHTML、innerText和outerHTML、outerText的区别的更多相关文章

  1. innerHTML innerText与outerHTML间的区别

    innerHTML与innerText及outerHTML间的区别最容易使初学者搞混淆,为了更好的使读者区分开.下面我就通过一个demo来解释: 代码: <!DOCTYPE html>&l ...

  2. javaScript中innerHTML,innerText,outerHTML,outerText的区别

    开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...

  3. js 中innerHTML,innerText,outerHTML,outerText的区别

    开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...

  4. innerHTML, innerText, outerHTML, outerText的区别

    innerHTML:返回标签内部嵌套的子元素的所有html标签+文本内容content. innerText:返回标签内部嵌套的子元素的文本内容content. outerHTML:返回标签本身+嵌套 ...

  5. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  6. innerHTML,innerText,textContent,outerHTML的用法以及区别

    innerHTML获取的是对象起始的位置到终止位置全部内容,包含html标签. innerText和textContent结果是一样的,不包含标签,直接获取标签内的内容,区别是两者浏览器的兼容性. o ...

  7. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  8. 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别

    测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别   我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...

  9. innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

    今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...

随机推荐

  1. HAProxy（三）：Keeplived+HAProxy搭建高可用负载均衡动静分离架构基础配置示例

    一.安装环境 1.软件版本 HAProxy:1.5.18 Keepalived:1.3.5 Nginx:1.12.2 PHP:7.2 系统版本:CentOS 7.4 2.IP分配与架构图 3.安装软件 ...

  2. OOP 面向对象的理解

    概念 面向对象编程(OOP)是一种编程语言模型,围绕对象是行为.数据.逻辑. 从历史上看,程序被视为一种逻辑程序,它接收输入数据,处理数据并生成输出数据. 基础 面向对象的3大核心思想:封装.继承.多 ...

  3. 如何利用Maven Repository下载开源软件jar包

    1.打开Maven Repository 网站:https://mvnrepository.com/ 2.输入需要寻找的jar包名称,比如mybatis,点击search,一般第一个就是 3.点击选择 ...

  4. 一款非常好用的万能本地离线激活工具，支持Office2016、Office2015、Win7、Win8/8.1/10、Win2008/2012/R2系统，全自动安装且无需联网状态即可全部激活，它由国外网友heldigard制作，小巧、简单，只需运行而不用去管它自动激活，能自动激活为180天无限循环，欢迎大家下载使用

    office2016激活工具(KMS)是一款非常好用的万能本地离线激活工具,支持Office2016.Office2015.Win7.Win8/8.1/10.Win2008/2012/R2系统,全自动 ...

  5. scala中的isInstanceOf和asInstanceOf

    如果实例化了子类的对象,但是将其赋予了父类类型的变量, 在后续的过程中,又需要将父类类型的变量转换为子类类型的变量,应该如何做? Ø  首先,需要使用isInstanceOf 判断对象是否为指定类的对 ...

  6. 通过Eureka自带REST API强行剔除失效服务

    1.确定需要强行剔除的服务 2.执行接口 方便复制: http://{ip}:{port}/eureka/apps/CONFIG-SERVER-TEST/tom:config-server-test: ...

  7. blfs（systemd版本）学习笔记-配置远程连接显示中文

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 远程连接的lfs系统需要具备以下环境便可在xshell或其他远程终端上面显示中文: 1.lfs主机设置中文编码(需要配置) 2. ...

  8. oracle数据库相关概念介绍

    数据库相关概念介绍: 问题: 数据存储:变量(基本类型,引用类型) 基本类型:少量数据 引用类型:保证数据的完整性 数据源: 声明直接赋值 IO流从硬盘中读取 java在处理数据时,需要从硬盘中读取数 ...

  9. encodeURIComponent编码时为什么要编码两次

    Why 要对url进行编码? 当使用地址栏提交查询参数时,如果不编码,非英文字符会按照操作系统的字符集进行编码提交到服务器,服务器会按照配置的字符集进行解码,所以如果两者不一致就会导致乱码.   Wh ...

  10. Python中元组相关知识

    下面给大家介绍以下元组的相关知识: ·元组可以看成是一个不可更改的list 1.元组的创建 # 创建空元祖 t = () print(type(t)) # 创建只有一个值的元组 # 观察可知元组中如果 ...