一、区别：
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. [原]shader实现矩形圆角

    哎!竭力想说清楚这个实现原理,并解释清楚shader里面的算法,结果发现越解释越不好理解,见谅! 一.实现目标:矩形四角是圆弧效果 二.实现的原理:通过每个角绘制1/4圆弧,剔除掉圆弧以外的部分. 原 ...

  2. [AX2012]Claims user

    AX2012可以创建一种account type为claims user的账号,这种账号不需要在AD中事先已创建用户,但是claims账号是无法通过rich client登陆到AX,它的主要应用场景是 ...

  3. java-cef系列视频第一集：从官方代码编译

    本视频介绍了如何从官方给出步骤编译java-cef代码,生成可运行可移植的发行版. 值得一提的是:截至2016-09-24java-cef代码编译方式有所改变,读者请自行查看bitbucket上关于编 ...

  4. 《Microsoft SQL Server 2008 Internals》读书笔记

    http://www.cnblogs.com/downmoon/archive/2010/01/26/1656411.html

  5. 严重: Exception starting filter struts2解决方法！

    转自:http://blog.knowsky.com/260578.htm 问题出现: 严重: Exception starting filter struts2java.lang.ClassNotF ...

  6. dos下mysql登陆

    dos下先进入mysql的bin目录 然后执行:mysql -r root -p123456(注意123456是密码) 进去之后:首先要这样:use test;//代表你目前要使用的是test这个数据 ...

  7. 年底奉献-QT编写视频监管平台（开源）

    忙忙碌碌又是一年,算算自己毕业四年半,一直在现在这家公司做研发外加总经理助理,研发起初用的VB.NET,而后全面转为C#,最后又全面转为QT,都是由于项目需要,算下来自己搞QT编程也已经四年了,201 ...

  8. VS-Visual Studio-IIS Express 支持局域网访问

    本文转自:http://www.itnose.net/detail/6132793.html 使用Visual Studio开发Web网页的时候有这样的情况:想要在调试模式下让局域网的其他设备进行访问 ...

  9. Fidder模拟Post请求

    背景 最近想用fidder模拟post请求,怎么都传值失败,发现写Composer => Request Body中写的内容,总是无法映射到mvc的action参数上.百度一番,发现如下解决方案 ...

  10. Linux下grep显示前后几行信息

    Linux下grep显示前后几行信息 标准unix/linux下的grep通过下面參数控制上下文 grep -C 5 foo file 显示file文件里匹配foo字串那行以及上下5行grep -B ...