innerHTML、textContent、innerText的区别和联系

最新推荐文章于 2023-12-15 23:14:09 发布
最新推荐文章于 2023-12-15 23:14:09 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： 学习-复习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mdzzzhangxian/article/details/53931385
版权

innerHTML:根据w3c innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

innerText: 从起始位置到终止位置的内容, 但它去除Html标签 。

textContent ： 根据w3c textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。

接下来是一个小Demo

innerHTML获取元素

获取到元素（包括标签）
innerHTML获取元素，包括元素的标签。

这里写图片描述

这里写图片描述

innerText同样获取到了元素，只取得了元素的内容。
这里写图片描述

这里写图片描述

textcontent 获取到元素内容。

To be continued

snake_yangqi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
09-05
总的来说，理解并熟练运用`innerHTML`、`innerText`（或`textContent`）和`outerHTML`能帮助开发者更高效地处理HTML文档中的内容。在实际开发中，应优先考虑兼容性和标准，适当使用正则表达式辅助处理HTML标签。
html（innerHTML）和text(innerTEXT)的区别与联系
qq_43552952的博客
01-06 2373
html（innerHTML）和text(innerTEXT)的区别 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset=&
InnerHtml、html 、InnerText —— 区别 与 联系
qq_53895518的博客
09-01 1270
innerHTMLhtml()和innerText是用于获取或设置元素内容的不同方法，它们在使用和效果上有一些区别。
innerHTML和innerText区别
bailizx
05-08 6206
目录 1 总结 2 读取html中元素 3 在设置html元素的时候 1 总结 innnerHTML用来获取标签元素或设置标签元素，包含文本和Html标签。在读取元素的时候，会将文本和Html标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析Html标签，只显示文本，而不将标签显示出来。 innerText用来设置或获取标签内文本内容, ...
innerText和innerHTML之间的区别是什么？
m0_66314752的博客
01-11 1098
innerText和innerHTML之间的区别是什么？
innerText 和 innerHTML的区别
qq_52372698的博客
02-02 1277
innerText 和 innerHTML的区别
innerHTML和innerText的区别
05-10
在 JavaScript 中，innerHTML 和 innerText 是两个常用的属性，它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的，但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
09-03
JavaScript中的innerHTML、outerHTML、textContent和innerText属性是处理HTML元素内容和文本的四个关键属性，它们各有特点，适用场景也有所不同。以下是对这些属性的详细解释： 1. innerHTML属性： innerHTML属性...
js中innerText/textContent和innerHTML与target和currentTarget的区别
10-17
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
javascript innerText和innerHtml应用
10-29
### JavaScript中innerText与innerHTML的应用详解 在Web开发中，JavaScript是一种非常重要的客户端脚本语言，它可以帮助我们实现页面上的动态效果。在JavaScript中，`innerText`与`innerHTML`是两个非常常用的属性...
innerHTML与innerText的关系
MichaelAn的博客
03-29 378
在文本节点操作过程中，innerHTML与innerText是较便捷的两种操作方式，都可以增加或者更改TextNode。 document.createTextNode的语法较复杂，所以前两中方法使用更多。 这两种方法有几个区别点： 1.innerText可以获得Tag之间的文本内容，innerHTML根据字面意思，可以获得Tag内部的Tags和text内容。 2.innerText存在兼...
innerText与innerHTML
u012975706的专栏
02-13 549
1.innerText：设置的是纯文本，如果用户将html代码设置给了innerText属性，那么innerText属性会自动执行转义，过滤掉htnl标签只获取里面的文字内容  innerText方法可以获取或更改某元素中的文本字符串内容。  但是要注意的是：innerText不是W3C标准方法，  所以不受FireFox浏览器的支持，兼容IE浏览器和谷歌浏览器。 2.innerHTML：
innerTex与innerHTML区别
weixin_42607969的博客
02-14 813
innerText 和 innerHTML 都是用来获取或设置 HTML 元素内部的内容，但它们有一些重要的区别： 获取内容：innerText 获取的是元素中显示的文本，它会忽略 HTML 标签。而 innerHTML 获取的是完整的 HTML 代码，包括标签。 渲染：innerText 是按照文本渲染的，它不会解析 HTML 代码。而 innerHTML 是按照 HTML 代码渲染的，它会...
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 7716
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
JavaScript中textContent、innerText和innerHTML的用法以及区别
热门推荐
秦哥的博客
09-15 6万+
目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容  2.获取标签中的文本内容  2.innerText的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 3.innerHTML的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 4.innerText和textContent的区别 1.兼容代码设置任意的标签中间的任意文本内容 ...
innerHTML、innerText、textContent有什么区别
最新发布
qq_42880714的博客
12-15 463
innerHTML、innerText、textContent有什么区别
innerHTM 和 textContent
jerisem的博客
08-04 196
innerHTML 是获取/设置标签的内容 1、获取：是获取元素内的所有内容 <div class="one" id="box">我是div <span>我是一个span</span> <p>我是一个p</p> </div> <script> let box = document.getElementById('box'); console.log(box.innerHTML..
JavaScript 学习-33.HTML DOM 获取和修改文本节点( textContent，innerText 和 innerHTML)
qq_27371025的博客
06-01 1536
textContent、innerText 和 innerHTML 三个方法的使用场景和区别
innerText和innerHTML和innerContent
sunhaomei的博客
05-07 1263
设置： 使用innerText主要是设置文本的，设置标签内容，是没有标签效果的 innerHTML是可以设置文本内容 innerHTML主要的作用是在标签中设置新的html标签内容，是有标签效果的 总结：想要设置标签内容，使用innerHTML，想要设置文本内容，innerText或者textContent或者innerHTML推荐用innerHTML 获取： innerText可以获取...
.value，.innerHTML，.innerText在JS中使用的区别
05-31
在 JavaScript 中，`.value`、`.innerHTML` 和 `.innerText` 是用于获取或设置元素内容的属性。 `.value` 属性通常用于表单元素，如输入框和下拉列表。它用于获取或设置表单元素的值。例如，如果有一个输入框元素：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值