区别描述如下：

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. 无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)

    比如输入apt-get install eclipse,或者apt-get update 会提示 无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)  无法对状态 ...

  2. Java高级类特性(一)

    一.继承性 1)继承的使用:权限修饰符 class A extends B{}:2)子类:A 父类(基类 SuperClass):B3)子类继承父类后,父类中声明的属性.方法,子类都可以获取到明确:当 ...

  3. java多线程关键字volatile、lock、synchronized

    --------------------- 本文来自 旭日Follow_24 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/xuri24/article/detail ...

  4. Linux常用基本命令:三剑客命令之-sed

    sed是一个很强大的文件处理工具,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作 格式:sed [option] [command] [file] 常用命令: a   ∶新 ...

  5. Python全栈学习_day001知识点

    今日大纲: . 变量. ***** . 常量.** . 注释.*** . 基础数据类型初识(int,str,bool). ***** . 用户输入 input ***** . 流程控制语句if. ** ...

  6. 前端学习 之 Bootstrap （一）

    中文文档 一.前言 1.简介 Bootsrtap作为一个前端框架,开箱即用,封装了前段开发的大量底层细节,开放灵活,对响应式设计网页很好支持,组件丰富,社区活跃. 特点: 可重用性 一致性 灵活的栅栏 ...

  7. webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  8. 【读书笔记】iOS-自定义URL Scheme注意事项

    如果两个不同的应用注册了同样的URL Scheme,那么后安装的应用会响应符合这种协议格式的URL. 如果你的应用的iPhone和iPad版是各自独立的(即不是Universal类型的),那么你就不应 ...

  9. 关于input的焦点事件

    关于input的焦点事件 $(".scanf_integral").focus(function(){//获取焦点//获取焦点后触发的事件 }) $(".scanf_in ...

  10. CSS--理解块级格式上下文（BFC）

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...