js中的innerHtml和innerText

最新推荐文章于 2022-08-31 11:22:06 发布

swimming_in_it_

最新推荐文章于 2022-08-31 11:22:06 发布

阅读量1.2k

点赞数 3

分类专栏： js 文章标签： javascript js innerHtml和innerText 区别常见问题

本文链接：https://blog.csdn.net/swimming_in_IT_/article/details/78059307

版权

js 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

document 对象中有innerHTML和innerText 两个属性，这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子来看一下。

示例1

[html]view plain copy 
   
 <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]view plain copy 
   
 <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浏览器打开，弹出内容为 hello world 和 hello world

通过 Firefox 浏览器打开，弹出内容为 hello world 和 undefined

通过 chrome 浏览器打开，弹出内容为 hello world 和 hello world

通过上面两个示例，可以看出：

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。

outerHTML

说到innerHTML，顺便说一下跟innerHTML相对的outerHTML属性。

继续看上面的代码，将alert(content.innerText) 修改为 alert(content.outerHTML)

通过浏览器可以看到弹出框为hello world

和 <divid="d1">hello world</div>

outerHTML指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。

总结说明

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

[html]view plain copy 
   
 <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标签之后的内容，这是个在所有浏览器均可使用的方法。

下面再说说，我初次接触这个东西遇到的一个问题：

问题描述是：

Uncaught TypeError: Cannot set property 'innerHTML' of null

引用1：

通过调试发现在js中的一段代码没有执行到，报以下错误

　　Uncaught TypeError: Cannot set property 'innerHTML' of null

　　然后查询该错误原因，结果是因为js引用放在了页面的头部，在修改 innerHTML 属性时找不到该属性，因为需要修改一个html标签中的内容，因此需要html加载并解析完成之后才能找到对应id的标签，在 head 处引用 js 导致 js 找不到对应 id ，当将 js 引用放在 body 尾部之后就可以正常显示了。

引用2：

当出现以下错误："……is not defined”、"Uncaught TypeError: Cannot set property 'innerHTML' of null”、"document.getElementById("Clock") is null" 时请注意！

很有可能是js文件中调用了html中的对象，并且js在这个调用的对象之前加载了。

所以呢，只要把js文件引用或代码放到最后或调用的对象后面就行了。

补充：正确的写法应该是在请用对象之前作个判断。 if(document.getElementById("dd")){....}

swimming_in_it_

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js中的innerHtml和innerText

document 对象中有innerHTML和innerText 两个属性，这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子来看一下。示例1[html] view plain copyhtml> head>title>innerHTMLtitle>head> bo
复制链接

扫一扫