innerHTML与innerText区别
document 对象中有innerHTML和innerText 两个属性， 这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子来看一下。
示例1
- <html>
- <head><title>innerHTML</title></head>
- <body>
- <p id="p1">hello world </p>
- <script>
- var content = document.getElementById("p1");
- alert(content.innerHTML);
- alert(content.innerText)
- </script>
- </body>
- </html>
通过IE浏览器打开，弹出内容为 "hello world" 和 "hello world"
通过 Firefox 浏览器打开，弹出内容为 "hello world" 和 "undefined"
通过 chrome 浏览器打开，弹出内容为 "hello world" 和 "hello world"
示例2
- <html>
- <head><title>innerHTML</title></head>
- <body>
- <div id="d1"><p id="p1">hello world </p></div>
- <script>
- var content = document.getElementById("d1");
- alert(content.innerHTML);
- alert(content.innerText)
- </script>
- </body>
- </html>
通过IE浏览器打开，弹出内容为 和 通过 Firefox 浏览器打开，弹出内容为 和 通过 chrome 浏览器打开，弹出内容为 和
通过上面两个示例，可以看出：
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText
是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText
属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
outerHTML
说到innerHTML，顺便说一下跟innerHTML相对的outerHTML属性。
继续看上面的代码，将alert(content.innerText) 修改为 alert(content.outerHTML)
通过浏览器可以看到弹出框为<p id="p1">hello world </p>
和 <divid="d1"><p id="p1">hello world</p></div>
outerHTML指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。
总结说明
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用
innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
- <html>
- <head><title>innerHTML</title></head>
- <body>
- <div id="d1"><p id="p1">hello world </p></div>
- <script>
- var content = document.getElementById("p1");
- alert(content.innerHTML.replace(/& lt;.+?>/gim,''));
- </script>
- </body>
- </html>
弹出的为去掉了html标签之后的内容，这是个在所有浏览器均可使用的方法。
innerHTML与innerText区别的更多相关文章
- JS中innerHTML 和innerText和value的区别
(1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
- JavaScript中innerHTML与innerText，createTextNode的区别
innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...
- innerHTML、innerText和outerHTML、outerText的区别
区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- 【JS】JavaScript中innerHTML与innerText，createTextNode的区别
innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...
- innerHTML和innerText的区别，以及select元素中怎么取出被选中的option。
一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...
- innerHTML和innerText的使用和区别
document对象中有innerHTML.innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的: 1) innerHTML设置或获取标签所包含的HTML+文本信 ...
随机推荐
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- python中in在list和dict中查找效率比较
转载自:http://blog.csdn.net/wzgbm/article/details/54691615 首先给一个简单的例子,测测list和dict查找的时间: ,-,-,-,-,,,,,,] ...
- 使用Python创建MySQL数据库实现字段动态添加以及动态的插入数据
应用场景: 我们须要设计一个数据库来保存多个文档中每一个文档的keyword. 假如我们每一个文档字符都超过了1000,取当中出现频率最大的为我们的keyword. 如果每个文档的keyword都超过 ...
- 解决Cydia出现红字提示“Sub-process/usr/bin/dpkg returned an error code(2)
进入此路径/var/lib/dpkg/,修改红框中的文件名,依次修改为:"available" 重新命名为 "available-bak":"stat ...
- JqGrid获得所有选中行数据ID数组，获取所有行的ID数组
获得选中行的ID数组:var ids = $("jqgridtableid").jqGrid('getGridParam','selarrrow'); 获得所有行的ID数组:var ...
- git工具 将源码clone到本地指定目录的三种方式
git工具 将源码clone到本地指定目录的三种方式 CreationTime--2018年7月27日15点34分 Author:Marydon 1.情景展示 运行git-bash.exe,输入命 ...
- eclipse Java compiler level does not match the version of the installed Java project facet.
eclipse Java compiler level does not match the version of the installed Java project facet. Create ...
- php-fpm 日志
1.php-fpm 错误日志 #默认位置 安装目录下的 log/php-fpm.log error_log = log/php-fpm.log #错误级别 alert(必须立即处理), error(错 ...
- 【微信小程序】：实现轮播图3秒滚动
wxml模板:(数据一维数组) <scroll-view scroll-y="true"> <swiper autoplay="auto" i ...
- HDUOJ-----2065"红色病毒"问题
"红色病毒"问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...