innerHTML outerHTML innerText textContent的区别
来源:互联网 发布:大连知行小学怎么样 编辑:程序博客网 时间:2024/06/06 03:27
在网上看了很多博文介绍他们之间的区别,大部分都说FF中innerText不能使用,但经过自己试验,是可以用的,所以自己把各种情况总结了一下。
首先是innerHTML,这个就不用多说了,返回的是标签内部所有的内容,包括标签和文本,还有空格
举两个栗子,对比一下空格导致的输出区别
<div id="main">1<span>123</span><p>222</p><div class="test">456</div></div>
这里去除id为main的标签中的innerHTML,结果如上图,可以看到标签之间的空格也输出了。
<div id="main">1<span>123</span><p>222</p><div class="test">456</div></div>
假如代码是这样的,结果就是下边这样
那么outerHTML是什么呢?其实就是包含了目标标签,结果是这样
好了,下边就来说一下innerText和textContent的区别。
innerText(兼容所有浏览器 这里ff和chrome都是最新)
<div id="main">1<div>123</div><p>222</p><p class="test">456</p><span>123</span> <span>222</span> <span class="test">456</span></div>浏览器:FireFox浏览器:chrome
左边是页面显示,右边是控制台输出的innerText,可以看到,窗口的内容和控制台输出基本是一样的,标签之间的空格也被输出。
不过浏览器之间还是有区别的,chrome中的第一个p标签的上方相比firefox中少了一个空行。
ie9ie8
IE9中的输出和FF中是一样的,而IE8及以下版本只有换行的效果,看到这里就醉醉得了吧。
textContent(ie8及以下不能使用 最新的ff和chrome都可使用)
textContent相对innerText就要简单很多,它没有考虑标签之间的关系,相较于纯粹的输出文本,它只是将代码中文本之间的空格给输出了。
还是同样的代码
<div id="main">1<div>123</div><p>222</p><p class="test">456</p><span>123</span> <span>222</span> <span class="test">456</span></div>FF:
chrome:
ie9及以上:
对于textContent,浏览器之间就没什么区别了。只是ie上版本问题需要考虑。
0 0
- innerHTML outerHTML innerText textContent的区别
- innerHTML, outerHTML, innerText, outerText, textContent
- InnerHTML、OuterHTML、InnerText、OuterHTML的区别:
- innerHtml/outerHtml/innerText/outerText/textContent比较
- innerHTML、textContent、innerText的区别和联系
- innerHTML,innerText,outerHTML区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML,outerHTML,innerText,outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML,outerHTML,innerText,outerText的区别
- outerHTML、innerHTML以及innerTEXT的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- innerHTML、outerHTML、innerText、outerText的区别
- Vector、ArrayList、List使用深入剖析
- Unity3D 性能优化
- c++第四次实验-1
- Hashtable 中Entry[] Index计算
- 如何用sitemesh---------- 装饰模式
- innerHTML outerHTML innerText textContent的区别
- Unity3D 图形优化
- SDAU 课程练习3 1003
- android图片处理方法(待整理)
- 14. Longest Common Prefix
- 用openjtag调试s3c2440裸机程序
- 微信支付中容易出错的问题
- java虚拟机——1
- C++第四次上机实验作业