textContent 与 innerHTML 与 innerText 区别

最新推荐文章于 2022-05-21 11:53:13 发布
最新推荐文章于 2022-05-21 11:53:13 发布
阅读量191 收藏
点赞数
分类专栏： html DOM 文章标签： js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28134589/article/details/108879611
版权

总结

a.textContent // 蓝猫淘气
a.innerHTML //蓝猫

淘气

a.innerText //蓝猫
//淘气
在这里插入图片描述
textContent 与 innerText 是获取当前标签下的文本
textContent 获取当前标签下所有的的文本 拼接 一起返回
innerText 不同级别标签返回的使用空格区分
innerText ,textContent ，都可以插入文本 并且清空之前的内容
innerHTML 都可以插入文本(标签) 并且清空之前的内容

<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
  <body>
    <ul id="ul">
         <li id="dli">蓝猫<div>淘气</div></li>
    </ul>
     <!--按钮 onclick当点击按钮时，执行一段JavaScript代码-->
    <button onclick
最低0.47元/天 解锁文章
冥想的声音
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中innerText/textContent和innerHTML与target和currentTarget的区别
10-17
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
innerText和textContent对比及使用介绍
09-05
innerText使用过程中遇到了FireFox的兼容问题FireFox不支持innerText方法但是有个类似的方法，叫textContent，类似innerText，都是用来获取（设置）元素中text的方法,感兴趣的朋友可以参考下
innerHTML 和innerText的区别
hztiao的博客
11-26 223
1）innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签) 2）innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签） 示例： //此时的a对象是p标签对象 console.log(a.innerHTML) //输出的是 Text in DIV console.log(a.innerTEXT) //输出的是 Text in DIV //此时的a对象是外层的div对象...
细述textContent 与 innerText、innerHTML 的区别
青颜的天空的博客
12-22 1582
Node.textContent 属性表示一个节点及其后代的文本内容。 1. 语法 let text = element.textContent; element.textContent = "some text"; 2. 描述 如果 element 是 Document，DocumentType 或者 Notation 类型节点，则 textContent 返回 null。如果你要获取整个文档的文本以及CDATA数据，可以使用 document.documentElement.textContent。
innerHTM 和 textContent
jerisem的博客
08-04 177
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..
innerHTML、innerText 和 textContent 的区别
16crow的博客
11-15 351
参考https://blog.csdn.net/dexing07/article/details/77947333 通过一个小型案例就能发现区别， 给出一个这样的html结构： <div id="test"> div的文本 <div style="display: none;"> <span>隐藏的内容</span> &...
textContent和innerHtml
weixin_33874713的博客
07-28 139
textContent,innerText, 查询或者设置元素的文本内容。 textContent如，html： <p>test gogo</p> javascript中： var p0 = document.getElementsByTagName("p")[0]; //查询文本内容 var txt = p0.textContent; /...
innnerText textContent和innerHTML
weixin_42638161的博客
03-15 288
innnerText innerText 属性表示一个节点及其后代的渲染文本内容 innerText获取的是纯文本值不含html标签 <span> "ahah1" <p>123</p> </span> <script> var span = document.query...
javascript textContent与innerText的异同分析
10-28
因为发现网络上很少有这方面的内容，因此就把自己私有blog上的这篇文章搬出来到Boluor的公开blog，方便其它人查阅。
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
09-03
主要介绍了javascript中的innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解，都是个人经验的总结，分享给大家，希望大家能够喜欢。
textContent、innerHTML、innerText的用法和区别
weixin_45849112的博客
11-07 568
** textContent使用详解 ** Node.textContent 属性表示一个节点及其后代的文本内容。 ** 语法 ** let text = element.textContent; element.textContent = “this is some sample text”; ** 描述 ** 如果 element 是 Document，DocumentType 或者 Nota...
textContent、innerText、innerHTML
sleepwalker_1992的专栏
06-28 423
textContent：设置或者返回指定节点（标签）中的文本内容。谷歌、火狐支持，IE8以及更早版本不支持。innerText：设置或者返回指定节点（标签）中的文本内容。谷歌、火狐、IE8都支持。innerHTML：获取文本内容&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"...
textContent和innerText以及innerHTML的区别
cristina_song的博客
08-03 541
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> button{ ...
innerText、textContent和innerHTML
qq_43618136的博客
02-10 106
innerText、textContent 设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持 设置标签中的文本内容,应该使用innerText属性,谷歌,高版本火狐,IE8都支持，低版本火狐不支持 如何判断一个属性在浏览器中是否支持 如果一个属性在浏览器中不支持,那么这个属性的类型是undefined 判断这个属性的类型 是不是undefined,就知道浏览器...
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 7213
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
innerHtml,innerText以及textContent的区别
m0_48182769的博客
08-09 803
1、innerText就只会输出标签里面的纯文本内容。 2、innerHTML会把元素标签也给输出出来，可以看成无脑搬运，不管是元素还是节点都搬运过来。 3、textContent会把标签解析后搬运。 基本用法可以参考以下代码运行后的结果： <body> <style> button{ background-color: #D59392; } </style> <div id="box"> &
innerHTML、textContent、innerText的区别和联系
snake_yangqi的博客
12-29 1407
innerHTML:根据w3c innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。innerText: 从起始位置到终止位置的内容, 但它去除Html标签 。textContent ： 根据w3c textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。 如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独
js：innerHTML与innerText||textContent
onepunchmen00的博客
10-08 414
DOM节点.innerHTML 获取整个节点内的所有内容，包括HTML标签，比如下面这段代码： 登录 注册 $("#header-unlogin").innerHTML的内容是： 登录注册 DOM节点.innerText/DOM节点.textContent（注意大小写） 获取整个节点内的所有去除HTML标签的文字内容，比如上面的那段代码： $("#head
.value，.innerHTML，.innerText在JS中使用的区别
最新发布
05-31
`.innerText` 属性用于获取或设置元素的文本内容，但与 `.innerHTML` 不同，它会忽略 HTML 标签。例如，如果有一个 p 元素： ``` <p id="myP">Hello, <strong>world! ``` 您可以使用以下代码获取或设置它的文本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值