JavaScript学习 — innerHTML与innerText区别

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： 基础学习 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67614925/article/details/124881200
版权

文章目录

各自功能

innerHTML：设置或获取元素内的所有子节点（包括标签、注释和文本节点）。
innerText：获取元素的文本，会过滤掉所以标签，将文档树中的所有文本拼接起来，设置时会把元素所以子节点都删除再重写，利用这一点，可以通过 innerText 属性过滤掉 HTML 标签。

实例区别

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http
最低0.47元/天 解锁文章
chenlei...
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
innerHTML和innerText的用法以及不同点
qq_43445758的博客
12-13 1800
innerHTML和innerText的区别 两者的主要区别在于用法不同； innerHTML可以将获取的元素作为HTML元素进行解析或修改， innerText可以将获取的元素作为纯文本进行解析或修改。 innerHTML和innerText的具体用法： <!DOCTYPE html> <html> <head> <meta charset="asmo-708"> <title></title> </head&gt
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 7603
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
前端innerText和value的区别
qweskdldlsg的博客
11-28 1694
前端innerText和value的区别 (本人前端也未学习多久，若有讲错的地方,欢迎各位指出，本人将加以修正。正好在写验证码的时候遇到这个问题) innertext 是值 获得被标签包裹着的值 ` <a id="a1">Galio</a>。 如上所示，现在Galio这个字符串被a标签所包裹起来了。 那么 <script> var a1 = document.getelementbyid("a1").innerText; alert(a1); <
JavaScript之innerHTML和outerHTML，innerText和outerText
Karka_的博客
09-15 4104
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
innerHTML与innerText的区别
idiot_MAN的博客
08-11 4743
innerHtml和innerText的区别
innerHTML与innerText区别
热门推荐
蜗牛学习笔记
03-08 8万+
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
JavaScript—事件及innerHTML、innerText区别
m0_59715238的博客
04-27 1447
目录 1.事件 2.innerHTML、innerText区别 1.事件 事件是由三部分组成： 事件源（谁被触发） 事件类型（如何触发，比如鼠标点击。。。） 事件处理程序（通过函数方式完成） <script> //1.获取事件源 var div=document.querySelector('div'); //2.绑定事件 注册事件 div.onclick //3.添加事件处理程序 ...
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
09-05
了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `innerHTML` 属性允许我们获取或设置一个元素的HTML内容，包括所有的HTML标签。例如，在以下代码中： ```html <span style="color:red">test1...
JavaScript中innerHTML，innerText，outerHTML的用法及区别
10-23
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
javascript innerText和innerHtml应用
10-29
innerText和innerHtml看字面也应该理解的了
InnerHtml、html 、InnerText —— 区别 与 联系
qq_53895518的博客
09-01 1198
innerHTMLhtml()和innerText是用于获取或设置元素内容的不同方法，它们在使用和效果上有一些区别。
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的区别
m0_48182769的博客
08-09 816
1、innerText就只会输出标签里面的纯文本内容。 2、innerHTML会把元素标签也给输出出来，可以看成无脑搬运，不管是元素还是节点都搬运过来。 3、textContent会把标签解析后搬运。 基本用法可以参考以下代码运行后的结果： <body> <style> button{ background-color: #D59392; } </style> <div id="box"> &
innerText和textContent的不同
那谁家的博客
10-18 2514
一、innerText和textContent的不同 不同之一，调用对象不同。 innerText只有HTML元素才可以调用，但是textContent任意Node节点都可以：HTMLElement.innerText和Node.textContent。 不同之二，值获取规则不同。 1. 规则差异之块级元素与换行符 已知有下面一段HTML： <p id="dom">一段文...
JS中innerText和innerHTML的区别
陈广晗
03-09 9570
innerText主要是设置文本的，甚至标签内容，是没有标签的效果的。 innerHTML主要的作用是在标签中设置新的heml标签内容，是有标签效果的 先来看看innerText的效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt..
Vue前端打包
最新发布
weixin_63680330的博客
07-04 318
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
innerhtml与innertext的区别
06-28
innerHTML和innerText都是JavaScript中常用的属性，用于获取或设置HTML元素的内容。它们的区别在于： 1. innerHTML获取或设置的是元素的HTML内容，包括标签和文本内容，而innerText只获取或设置元素的文本内容，不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chenlei...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值