一、区别：
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. BusyBox

    http://blog.csdn.net/a345017062/article/details/6250619

  2. 点击短信中的url打开某个应用

    实现功能: 短信内容中含有url(例如,http://youngo.com/app/),点击后打开apk 遗留问题: 点击url后,会出现选择框,让用户选择是用浏览器打开还是用该apk打开----没有 ...

  3. asp.net MVC 自动下载apk

    在Asp.net MVC中直接把.apk文件放入/Upload/App/ 路径下,然后通过IIS发布完之后,再通过http://xxx/Upload/App/xx.apk访问是访问不到的,因此不能下载 ...

  4. Swift 程序流程控制

    Swift采用类同c语言的流程控制语句,if, for, for-in,  while,  do-while , switch, break, continue .Swift语言的Switch语句自动 ...

  5. javascript 无语的==

    今天面试不小心掉进坑了,大公司特别喜欢考javascript,而且专门挑很tricky的case. javascipt的==简直就是黑魔法,以前偷懒总是用,感觉也没有问题,可是准备面试就需要有寻根问底 ...

  6. ODAC（V9.5.15) 学习笔记（十六）直接访问模式

    直接访问模式(Direct mode)是ODAC最大的特色之一,即不需要安装Oracle客户端,ODAC越过了OCI(Oracle Call Interface ),使用TCP/IP协议就可以直接与O ...

  7. sap IRfcTable 转成 DataTable

    public DataTable GetDataTableFromRFCTable(IRfcTable myrfcTable) { DataTable loTable = new DataTable( ...

  8. ubuntu 安装bochs

    //首先官网下载bochs源码wget http://bochs.sourceforge.net/svn-snapshot/bochs-20150503.tar.gz//然后解压 tar vxzf b ...

  9. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  10. C#高级编程（第8版）

    http://spu.jd.com/11328513.html 第1章 .NET体系结构1.1 C#与.NET的关系1.2 公共语言运行库1.2.1 平台无关性1.2.2 提高性能1.2.3 语言的互 ...