innerHTML/innerText/textContent的区别与共同点

Randomlv

已于 2024-02-23 23:12:45 修改

阅读量411

点赞数 8

文章标签： javascript vscode html

于 2024-02-23 23:10:18 首次发布

本文链接：https://blog.csdn.net/weixin_66145218/article/details/136264405

版权

js当中的innerHTML/innerText/textContent的区别与共同点

接下来，咱们直接上总结

	innerHTML	innerText	textContent
获取标签之间的全部内容	可以	不可以	不可以
获取标签之间空白节点	可以	不可以	不可以
获取标签之间的文本内容	可以	可以	可以
获取标签之间的内容时中间有html标签会不会解析掉而直接输出文本内容	不可以	可以	可以
获取标签之间的文本内容(夹带着html标签)	可以	不可以	不可以
利用js代码动态添加纯文本内容	可以	可以	可以
利用js代码动态添加文本内容(但是中间夹带着html标签时会不会解析掉，然后直接在document上显示为文本)	可以	不可以	不可以

简而言之就是，只要是要操作的标签中含有html标签，就只能使用innerHTML，使用其他的标签都不能解析，所以，保险来说，我们只要都使用innerHTML就可以了，但是如果想获得纯文本内容而且不包含空白节点，要使用innerText，此时还要考虑的问题是兼容性问题

下面是代码展示

在这里，我们浅浅地提一嘴，p标签属于文本标签，其中只能放文字图片以及表单元素，其他的都不能放，也不能放p标签自己！！！
当添加的新的内容中含有p标签时，可以看到使用三者的情况对比
在这里插入图片描述

在这里插入图片描述
当使用三者获取标签中的文本内容时都是可以直接获取的，但是可以看到的是，当使用innerHTML和textContent时，输出的文字内容前面是有一片空白的，为什么呢？因为innerHTML获取到的是标签之中的所有内容（包含html标签，输出的时候不会解析会直接输出出来，添加的时候会解析，然后新添加的内容就是纯文本），包括空白节点(这个地方实在是不知道叫啥了，也没搜到，后续看到了会再重新写上的)，所以会有一段是空白的
而textContent也是同理
innerText则是可以得到纯文本内容
动态添加时
除了innerHTML会将html标签解析其他的都不会，都是直接将标签显示在页面上
像是这样
在这里插入图片描述
而innerHTML则是这样