一、区别：
1）innerHTML:
　　从对象的起始位置到终止位置的全部内容,不包括Html标签。
2）outerHTML:
　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

二、例子1：
<div id="test">

   <span style="color:red">test1</span> test2

</div>
1）innerHTML的值是“<span style="color:red">test1</span> test2 ”

2）outerHTML的值是<div id="test"><span style="color:red">test1</span> test2</div>

三. 例子2:
<body>

<div>aa</div>

</body>
通过document.body.innerHTML获取到的内容是:<div>aa</div>
通过document.body.outerHTML获取到的内容是:<body><div>aa</div></body>

Δ 需要注意的是outerHTML属性只有IE浏览器才有，其它浏览器是不支持的




转自 : innerHTML和outerHTML有什么区别

innerHTML和outerHTML有什么区别的更多相关文章

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

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

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

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

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

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

  4. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  5. innerHTML innerText与outerHTML间的区别

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

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

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

  7. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

  8. innerHTML 与 outerHTML区别

    示例代码: <div id="test"> <p>这是innerHTML</p> <p>这是innerHTML</p> ...

  9. javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...

随机推荐

  1. 64位Linux下编译搭建Nginx1.5与PHP5.5(CentOS6.4)

    (1)安装Nginx1.5.2更新Nginx和PHP的依赖包yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng \libp ...

  2. ubuntu-16.04+-xxx-i386.iso ：安装 Oracle 11gR2 数据库

    前言:说实在的,ubuntu 16.04以上很难安装oracle!其间走过了艰难的一段路! 重要附件:ubuntu16.04+-xxx-i386.iso_安装oracle所需的软件包.zip 特点: ...

  3. [PaPaPa][需求说明书][V0.1]

    PaPaPa软件需求说明书V0.1 前   言 我觉得我们废话不能多,废话一多的话大家就找不到重点了,其实本项目是出于技术研究的目的来开发的,大家讨论了半天决定要做社(yue)交(pao)类的项目. ...

  4. offsetof的使用

    #include <stddef.h> #define offsetof ( TYPE, m)   (size_t )&reinterpret_cast< const vol ...

  5. 另类angularjs应用

    回顾 上一篇文章主要讲解了创建兼容任意浏览器(主要是ie的一些奇葩问题)的angularjs web应用,但是项目开发中其实更重要的还是在功能的模块化.代码自动压缩上面,这样项目在后期维护或者功能的重 ...

  6. smartjs 0.2发布 - 新增oop模块&AOP增强

    SmartJS2.0发布,更新内容如下: 新增oop(klass,factory)模块: promiseEvent加入非阻塞模式noBlock: trigger加入属性监听; smartjs主模块优化 ...

  7. ES6入门系列一（基础）

    1.let命令 Tips: 块级作用域(只在当前块中有效) 不会变量提升(必须先申明在使用) 让变量独占该块,不再受外部影响 不允许重复声明 总之:let更像我们熟知的静态语言的的变量声明指令 ES6 ...

  8. Office Web Apps Server 概述

    Office Web Apps Server 是新的 Office 服务器产品,它提供 Word.PowerPoint.Excel 和 OneNote 的基于浏览器的版本.单个 Office Web ...

  9. 开放产品开发（OPD）：开篇

    OPD?这是什么玩意?google一下.忘记说了,最近google被封锁的厉害,那就百度一下吧.可惜,OPD找不出是什么.你今天你找不到是正常的,因为之前还没有OPD,而现在才开始有OPD这个东东.相 ...

  10. .Net魔法堂：史上最全的ActiveX开发教程——ActiveX与JS间交互篇

    一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserContr ...