企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

js中innerHTML,innerText,outerHTML用法总结

JavaScript笔记 码云 68℃ 0评论
目录
[隐藏]

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

转载请注明:码云笔记 » js中innerHTML,innerText,outerHTML用法总结

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址