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

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

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

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

  3. JavaScript中innerHTML与innerText,createTextNode的区别

    innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...

  4. 【JS】JavaScript中innerHTML与innerText,createTextNode的区别

    innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...

  5. innerhtml和innertext的用法以及区别

    例如: <div id="test"> <span style="color:red">test1</span> test2 ...

  6. js中innerHTML与innerText的用法与区别

    用法: <div id="test">    <span style="color:red">test1</span> te ...

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

    ____________________________________________________________________________________________________ ...

  8. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  9. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

随机推荐

  1. bootstrap让footer固定在顶部和底部

    一.原理 使用fixed进行固定定位,相对于浏览器窗口进行定位,然后再设置其z-index的值即可. 二.Bootstrap中使用的类 1.顶部固定:navbar-fixed-top 2.底部固定:n ...

  2. prometheus 监控 zookeeper

    1.zookeeper的规则 [root@do1cloud01 prometheus]# cat zookeeper.yml rules: - pattern: "org.apache.Zo ...

  3. git 命令 git status add rm commit mv

    1.查看 git 仓库文件改动状态 Git 仓库内文件改动有 4 种状态,除了 Unmodified 状态的文件因为并未改动默认没有状态不做显示之外,其他文件改动状态都可以通过 git status ...

  4. Autoit安装及启动

    1.Autoit下载: 官网下载地址:https://www.autoitscript.com/site/autoit/downloads/ 提供百度网盘下载:https://pan.baidu.co ...

  5. extern int PASCAL

    表示声明一个变量,这个变量在其他地方已经定义,但是这里因为要使用,所以声明下. 写成下面: extern “C” int PASCAL: 说明PASCAL是在一个C文件下定义的.如果不是在C下就不用加 ...

  6. 在 jupyterlab 和 jupyter notebook 中集成conda虚拟环境

    在jupyterlab中切换虚拟环境使用jupyter-conda包,参考链接:https://pypi.org/project/jupyter-conda/ Install Requirements ...

  7. paramiko-ssh-sftp实例

    import paramiko transport = paramiko.Transport(('192.168.71.136', 22)) transport.connect(username='r ...

  8. Hinton等人新研究:如何更好地测量神经网络表示相似性

    Hinton等人新研究:如何更好地测量神经网络表示相似性 2019年05月22日 08:39:15 喜欢打酱油的老鸟 阅读数 177更多 分类专栏: 人工智能   https://www.toutia ...

  9. mysql解决fail to open file的方法

    由于没有安装有mysql的可视化工具,在使用cmd导入sql文件时,使用source 命令时出现 fail to open file的错误,各种查找后使用以下方法解决了: 1.首先进入mysql数据库 ...

  10. 基于JWT的token身份认证方案(转)

    https://www.cnblogs.com/xiangkejin/archive/2018/05/08/9011119.html 一.使用JSON Web Token的好处? 1.性能问题. JW ...