document对象中有innerHTML、innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的;

1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身)

2) outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身)

3) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身)

4) outerText设置或获取标签自身及其所包含的文本信息(包括自身)

innerText和outerText在获取的时候是相同效果,但在设置时,innerText仅设置标签所包含的文本,而outerText设置包含包括标签自身在内的文本。

示例代码:

示例1:

通过IE浏览器打开,弹出内容为"hello world"和"hello world"

通过Firefox浏览器打开,弹出内容为"hello world"和"undefined"

通过chrome浏览器打开,弹出的内容为"hello world"和"hello world"

alert(content.outerHTML)则弹出:"<p id="p1">hello world</p>"

示例2

通过IE浏览器打开,弹出内容为"<p id="p1">hello world</p>"和"hello world"

通过Firefox浏览器打开,弹出内容为"<p id="p1">hello world</p>"和"undefined"

通过chrome浏览器打开,弹出的内容为"<p id="p1">hello world</p>"和"hello world"

alert(content.outerHTML)则弹出:"<div id="d1"><p id="p1">hello world</p></div>"

综上:innerHTML所有浏览器都支持,innerText是IE浏览器支持的,Firefox浏览器不支持。

不同之处:

1) innerHTML、outerHTML在设置标签之间的内容时,包含的HTML会被解析;而innerText、outerText则不会;

2) innerHTML、innerText仅设置标签之间的文本,而outerHTML、outerText设置包含自身标签在内文本

innerHTML innerText的使用和区别的更多相关文章

  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. JS中innerHTML 和innerText和value的区别

    (1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...

  5. js中innerHTML、outerHTML与innerText的用法与区别

    ____________________________________________________________________________________________________ ...

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

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

  7. js中的innerHTML,innerText,value的区别

    首先先说一下 我自己认为的 innerHTML,innerText,value的区别 innerHTML 是在控件中加html代码 就是设置一个元素里面的HTML eg: <html> & ...

  8. innerHtml innerText textContent兼容性问题

    innerHtml,innerText,textContentinnerHtml获取元素带标签的内容:innerText只获取元素的文本:火狐不支持innerText,支持textContent: / ...

  9. innerHTML和outerHTML有什么区别

    一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子1: & ...

随机推荐

  1. [IB配置]PeopleSoft如何重置网关属性administrator密码

    当您在登陆主菜单>PeopleTools>继承代理程序>配置>网关>网关设置属性在尝试打开网关属性配置时候,需要输入账号:administrator以及密码,有时候在升级 ...

  2. 利用TinyXml进行数据库的热更新

    TinyXml库比较小,但功能较为完善,挺适合用来读取小块的xml文件; 我写了几个利用TinyXml读取和保存数据的例子,大家可以参考使用; 主要是为了热更新配置所做的一些函数应用; //开始热更 ...

  3. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  4. Java之StringBuffer,StringBuilder,Math,Date,SimpleDateFormat,UUID,File

    java.lang 类 StringBuffer java.lang.Object java.lang.StringBuffer 所有已实现的接口: Serializable, Appendable, ...

  5. Miller-Rabin 素性测试

    根据费马小定理,若p为素数,则必有a^(p-1) mod p=1 对和p互质的a成立. 根据二次探测定理:如果p是素数,且0<x<p,则方程x^2 mod p=1的解为1或p-1. 所以若 ...

  6. SpringMVC+Mybatis+MySQL配置Redis缓存

    SpringMVC+Mybatis+MySQL配置Redis缓存 1.准备环境: SpringMVC:spring-framework-4.3.5.RELEASE-dist Mybatis:3.4.2 ...

  7. Azure 认知服务 (5) 计算机视觉API - 使用C#代码实现读取图片中的文字(OCR)功能

    <Windows Azure Platform 系列文章目录> 在笔者之前的文章:Azure 认知服务 (4) 计算机视觉API - 读取图片中的文字 (OCR) 介绍了使用用户界面,在海 ...

  8. TP3.2 配置最新的阿里大于sdk

    TP3.2 配置最新的阿里大于sdk 最近公司买了阿里云的阿里大于短信验证 ,这里记录下本人接入短信验证的过程和心得. 大家是不是一开始都是和本人一样直接去百度下怎么有没有现成的demo 或者是封装好 ...

  9. 度度熊与邪恶大魔王 DP | 完全背包

    Problem Description 度度熊为了拯救可爱的公主,于是与邪恶大魔王战斗起来. 邪恶大魔王的麾下有n个怪兽,每个怪兽有a[i]的生命值,以及b[i]的防御力. 度度熊一共拥有m种攻击方式 ...

  10. The method makeText(Context, CharSequence, int) in the type Toast is not applicable for the arguments (new View.OnClickListener(){}, String, int)

    package comxunfang.button; import android.support.v7.app.ActionBarActivity; import android.os.Bundle ...