innerHTML和innerText区别

目录

1 总结

2  读取html中元素

3 在设置html元素的时候

---

1 总结

innnerHTML用来获取标签元素或设置标签元素，包含文本和Html标签。在读取元素的时候，会将文本和Html标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析Html标签，只显示文本，而不将标签显示出来。

innerText用来设置或获取标签内文本内容, 但它去除Html标签。在读取元素的时候，只会读取文本；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，不会解析Html标签，也就是说，里面的标签并不是html中的标签，而只是一个文本。

2  读取html中元素

innnerHTML在读取元素的时候，会将文本和Html标签一起读取出来；

innerText在读取元素的时候，只会读取文本。innnerHTML、innerText在设置元素的时候，会覆盖掉原来的元素中文本和标签。

    
    


    
123
    

        内容1
        内容2
    

结果

3 在设置html元素的时候

如果新的内容包含标签，innerHTML会解析Html标签，只显示文本，而不将标签显示出来；innerText不会解析Html标签，也就是说，里新内容中包含的标签并不是html中的标签，而只是一个文本，会将其一起显示出来。

    
    


    

        内容1
        内容2
    
    

        内容1
        内容2
    

结果是：写js代码前（左），代码后（右）

         

百里于2020年5月8日

参考：文章

如果有错，请您指出！如有侵权，请联系我删除！