js中innerHTML，innerText，outerHTML用法总结

如何获取 DIV 里面的内容，在 js 中为大家提供了三种方法，分别是 outerHTML、innerHTML 和 innerText，这里要注意大小写！看起来长得很像，那么到底怎么使用以及它们之间有什么区别，我想很多人不是很了解，不过没关系，牛人博客将为大家详细的介绍他们三者的区别，同时也会为大家带来除了 javascript 提供的三种方法外，我自己在项目中用到的一种兼容各浏览器（包括火狐游览器）。相信通过本文介绍一定会让你有所收获，欢迎大家一起来学习。

不废话了，请看下文示例介绍。

HTML 代码：

<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 的值也就是

<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 的内容解决方案：

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 的用法及区别的总结内容，希望对大家喜欢，更多精彩内容敬请关注码云笔记，额希望大家能够在评论里留下你宝贵的意见。