区别描述如下：

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. IdentityServer4 中文文档 -9- （快速入门）使用客户端凭证保护API

    IdentityServer4 中文文档 -9- (快速入门)使用客户端凭证保护API 原文:http://docs.identityserver.io/en/release/quickstarts/ ...

  2. PowerDesigner 修改Name ,Code 不变

    tools-> General   Options-> Dialog:Operation   Modes: 去掉 NameToCodeMirroring 前面的√      

  3. [android] 手机卫士自定义组合控件

    设置中心 新建SettingActivity 设置GridView条目的点击事件 调用GridView对象的setOnItemClickListenner()方法,参数:OnItemClickList ...

  4. linux部分常见指令

    游走指令 cd: 进入指定位置 cd /   进入到根目录   cd /home   进入到home文件夹 cd - 进入上次所在文件夹    比如  在 / 时 cd /usr/local到loca ...

  5. Clock Pictures（kmp + Contest2075 - 湖南多校对抗赛（2015.04.26））

    Problem H: Clock Pictures Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 73  Solved: 18[Submit][Stat ...

  6. Mysql锁原理浅谈

    锁类型/引擎 行锁 表锁 页锁 MyISAM 有 InnoDB 有 有 BDB(被InnoDB取代) 有 有 锁的分类 表锁:开销小,加锁快,不会死锁,粒度大,冲突率高,并发低. 行锁:开销大,加锁慢 ...

  7. 对Spring中IOC和DI的理解

    前几篇讲了Spring中IOC和DI的用法,本篇应该放到三篇之前,但一直没有想到好的讲解方式,后参考https://blog.csdn.net/luoyepiaoxue2014/article/det ...

  8. Confluence设置MySQL数据库报错：必须使用'READ-COMMITTED'作为默认隔离级别。

    解决方案: mysql -u root -p123456 SET GLOBAL tx_isolation='READ-COMMITTED'; mysql数据库创建 1.设置mysql隔离级别 SET ...

  9. css兼容问题（一）

    开头语:不用就忘,还是自己乖乖的记笔记吧! 正文开始:    (一)如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上 ...

  10. ImmediateFunc.js

    (function(){ var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] var today = new Date() var msg = ...