区别描述如下：

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. JavaWeb学习 (二十一)————基于Servlet+JSP+JavaBean开发模式的用户登录注册

    一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

  2. 在JS中统计函数执行次数与执行时间

    假如想统计JS中的函数执行次数最多的是哪个,执行时间最长的是哪个,该怎么做呢? 1. 统计函数执行次数 2. 统计函数执行时间 3. 如何控制函数的调用次数 4. 如何控制函数的执行时间 一.统计函数 ...

  3. DataTable不能通过已删除的行访问该行的信息解决方法

    使用dt.Rows[0]["name", DataRowVersion.Original]可以获取

  4. forfiles

    关键命令就这一条了:forfiles.exe /p "D:\Kugou" /m *.tar /d -14 /c "cmd /c del @path" 这条命令的 ...

  5. [PHP] 算法-有序数组旋转后寻找最小值的PHP实现

    把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数组 ...

  6. MAC下搭建个人博客

    安装homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/inst ...

  7. Linux下查看tomcat控制台输出信息

    1.进入tomcat/logs文件夹下 2.# tail -f catalina.out -f:实时刷新

  8. chrome 远程调试相关问题

    1.使用chrome remote debug时打开inspect时出现一片空白 2.如何不用FQ可以享受Chrome for android的远程调试功能 3.chrome://appcache-i ...

  9. 【面试】Python面试题库

    https://blog.csdn.net/ChenVast/article/details/81451460 第一部分 Python基础篇(80题) 为什么学习Python? 通过什么途径学习的Py ...

  10. 网页一键加入QQ群

    三步简单实现功能:网页提供加入qq群按钮  让他人一键加入qq群 第一步:进入qq群官网:http://qun.qq.com/join.html 第二步:选择需要加入的群并生成网页代码 第三步:在网页 ...