一、区别：
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. Spring3系列12- Spring AOP AspectJ

    Spring3系列12- Spring AOP AspectJ 本文讲述使用AspectJ框架实现Spring AOP. 再重复一下Spring AOP中的三个概念, Advice:向程序内部注入的代 ...

  2. PHP/MYSQL UTF8 中文排序

    1. 需要在php数组中用中文排序,但是一般使用utf8格式的文件,直接用asort排序不行.用gbk和gb2312可以.这跟几种格式的编码有关系.gbk和gb2312本身的编码就是用拼音排序的. f ...

  3. SAP的运输功能（转）

    SAP的运输功能(transportation)  transportation大体有三个作用: 1.运输计划transportation planning 概念:对outbound delivery ...

  4. 解决clone问题之外的体会

    adlnkoh.sh started at Thu Aug 25 15:42:51 CST 2016 Log file located at /u02/db/testdb/11.1.0/appsuti ...

  5. netty ByteBuf分析

    1.Heap Buffer(堆缓冲区) 2.Direct Buffer(直接缓冲区) 3.Composite Buffer(复合缓冲区) 4.PooledByteBuf 池缓冲 readerInex ...

  6. 一款基于HTML5的Web 3D开发工具

    在我们协助客户进行3D应用的开发过程中,客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎,以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型.由于项目涵盖的行业繁多. ...

  7. visual studio 2012 has stopped working

    I had similar problem which was resolved by taking two steps : 1A. DELETE THE REGISTRY KEY : 32-bit ...

  8. AC_Dream 1216 G - Beautiful People

    题意:有n个人每人有一个力气值Si,美丽值Bi,满足Bi>Bj&&Si>Sj 或者 Bi<Bj&&Si<Sj 的人可以一起参见晚会,问最多有多少 ...

  9. iOS-动态计算Label的高度

    一. 要求 1.根据网络请求的回来的字符串内容,动态计算Label的高度. 二. 注意点 1. 要注意设置label 的 numberOfLines 为0; 2. MAXFLOAT 的作用. 设置高度 ...

  10. java中this关键字

    1.     当成员变量和局部变量重名时,在方法中使用this时,表示的是该方法所在类中的成员变量.(this是当前对象自己) 如:public class Hello { String s = &q ...