如何获取DIV里面的内容，在js中为大家提供了三种方法，分别是outerHTML、innerHTML和innerText，这里要注意大小写！看起来长得很像，那么到底怎么使用以及它们之间有什么区别，我想很多人不是很了解，不过没关系，牛人博客将为大家详细的介绍他们三者的区别，同时也会为大家带来除了javascript提供的三种方法外，我自己在项目中用到的一种兼容各浏览器（包括火狐游览器）。相信通过本文介绍一定会让你有所收获，欢迎大家一起来学习。
不废话了，请看下文示例介绍。
HTML代码：
1 2 3 | <div id="test"> <span style="color:red">test1</span> test2 </div> |
1、innerHTML的介绍:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
document.getelementbyId(“test”).innerHTML
上例中的test.innerHTML的值也就是“<span style=”color:red”>test1</span> test2 ”。
2、innerText的介绍:
从起始位置到终止位置的内容, 但它去除Html标签
document.getelementbyId(“test”).innerText
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
3、outerHTML的介绍:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
document.getelementbyId(“test”).outerHTMl
上例中的text.outerHTML的值也就是
1 | <div id="test"><span style="color:red">test1</span> test2</div> |
innerHTML和innerText的区别是什么？
共同点：innerHTML和innerText都会把元素内内容替换掉。
不同点：就是上面1、2点介绍的内容
这里我在提醒大家的是，innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。
上面介绍的是基于两种浏览器的内核的浏览器，这几种方法是不兼容的。下面是兼容火狐IE的Javascript获取div的内容解决方案：
1 2 3 4 5 6 | if(navigator.appName.indexOf(“Explorer”)>-1) { vartext=document.getElementById(“text”).innerText; }else{ vartext=document.getElementById(“text”).textContent; } |
navigator.appName.indexOf(“Explorer”)>-1意思就是当获取到的浏览器的名称中带有Explorer
结束语
以上就是今天码云笔记为大家带来的的关于JavaScript中innerHTML，innerText，outerHTML的用法及区别的总结内容，希望对大家喜欢，更多精彩内容敬请关注码云笔记，额希望大家能够在评论里留下你宝贵的意见。
评论抢沙发