一、区别：
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. Photoshop操作指南

    缩放工具(Z) 之后涉及到移动功能,暂时切换到小抓手工具. 图1 图2 切换到:暂时切换到:当按住空格键的时候,显示小抓手工具.松开之后,又回到了之前的显示上. 满画布显示当前画面:ctrl+0(数字 ...

  2. JS实现剪切板添加网站版权、来源

    公司官网有这样需求,写好后,备份以后留用. 只兼容chrome.firefox.IE9+等主流浏览器. // https://developer.mozilla.org/en-US/docs/Web/ ...

  3. WindowsServer2012桌面图标设置

    1.win+R调出运行窗口 2.输入:rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 即可

  4. ML的灌水现象

    (http://demonstrate.ycool.com/post.3137870.html) 看了几天 paper 和书,发现自己果然就是 zt好多东西就是不懂,那些人做的真快,我才建立起一种大致 ...

  5. DataContractSerializer序列化与反序列化遇到的奇怪问题

    private static void Serialize1(string filename, object obj)         {             var stream = new F ...

  6. centos 7 卸载 mariadb 的正确命令

    #列出所有被安装的rpm package rpm -qa | grep mariadb #卸载 rpm -e mariadb-libs-5.5.37-1.el7_0.x86_64 错误:依赖检测失败: ...

  7. Web API 入门系列- 从一个示例开始

    1.新建Web API项目 2.新建bookModel 3.新建book web api 控制器 为了简单方便,演示系统使用内存集合持久化书籍. 4.测试web api 我们怎么方便测试web api ...

  8. Android代码优化工具——Android lint

    作为移动应用开发者,我们总希望发布的apk文件越小越好,不希望资源文件没有用到的图片资源也被打包进apk,不希望应用中使用了高于minSdk的api,也不希望AndroidManifest文件存在异常 ...

  9. [Ubuntu] bash: warning: setlocale: LC_ALL: cannot change locale

    问题症状 -bash: warning: setlocale: LC_ALL: cannot change locale (en_US.utf8) 解决方法 本地化是指不同地区用户在键盘上输入不同语言 ...

  10. 线程安全集合 ConcurrentDictionary<TKey, TValue> 类

    ConcurrentDictionary<TKey, TValue> 类 [表示可由多个线程同时访问的键/值对的线程安全集合.] 支持 .NET Framework 4.0 及以上. 示例 ...