innerText和innerHTML的区别

innerHTML和innerText都是元素的属性,通过修改这个元素的属性可以达到修改元素内容的目的。但是二者之间略有不同。具体来说,它们的区别如下:

  • innerHTML可以获取或设置元素内部的HTML内容,包括HTML标签,而innerText则只返回纯文本内容,会自动去掉HTML标签。
  • innerHTML处理速度相对较快,而innerText处理速度较慢。
  • 在获取值时,如果元素内部只有文本内容,innerText和innerHTML得到的值相同。但是,如果元素内部包含HTML标签,那么innerText只会返回标签中的文本内容,而innerHTML则会返回所有的HTML代码。

以下是一个示例,演示如何获取和设置innerHTML和innerText的值:

 

Html

<div id="myDiv">

<p>hello world</p>

<p>hello <span>everyone</span></p>

</div>

<script>

const myDiv = document.getElementById('myDiv');

console.log(myDiv.innerHTML); // 输出<div id="myDiv"><p>hello world</p><p>hello <span>everyone</span></p></div> console.log(myDiv.innerText); // 输出hello worldhello everyone myDiv.innerHTML = '<h1>新标题</h1>';

console.log(myDiv.innerHTML); // 输出<h1>新标题</h1>

myDiv.innerText = '新内容';

console.log(myDiv.innerHTML); // 输出<h1>新内容</h1>

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/13646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 79.单词搜索

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内…

若依前后端分离版本-前后端交互整理

ruoyi-ui与后端交互 方法一&#xff1a;表单 使用 headers: {Content-Type:application/x-www-form-urlencoded}, ruoyi-ui的vue中 //ruoyi-ui的vue中定义 formData: {a: 111,b: 111,c: 1,}, //vue中方法调用 outBound() { empty(this.formData).…

6款网页表白代码6(附带源码)

6款网页表白代码6 前言效果图及部分源码1.爱心倒计时2.一起看星星3.爱心4.爱心&#xff08;有鼠标移动特效&#xff09;5.爱心&#xff08;高级效果&#xff09;6.爱心&#xff08;3D效果&#xff09; 领取源码下期更新预报 前言 大部分人都有喜欢的人&#xff0c;学会这些表白…

蓝桥杯物联网竞赛_STM32L071KBU6_关于sizo of函数产生的BUG

首先现象是我在用LORA发送信息的时候&#xff0c;左边显示长度是8而右边接收到的数据长度却是4 我以为是OLED显示屏坏了&#xff0c;又或者是我想搞创新用了const char* 类型强制转换数据的原因&#xff0c;结果发现都不是 void Function_SendMsg( unsigned char* data){unsi…

微软Edge

微软Edge浏览器概述 功能介绍 微软Edge是一款基于Chromium开源项目的网页浏览器&#xff0c;旨在提供更快的网页加载速度、更高的安全性和更好的用户体验。它支持多种操作系统&#xff0c;包括Windows、macOS、Android和iOS&#xff0c;能够满足不同用户的需求。Edge浏览器拥…

赶紧收藏!2024 年最常见 20道 Redis面试题(三)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道 Redis面试题&#xff08;二&#xff09;-CSDN博客 五、Redis的持久化机制是什么&#xff1f; Redis 是一个高性能的键值存储系统&#xff0c;支持多种类型的数据结构&#xff0c;如字符串、哈希、列表、集合、…

python数据类型之字符串

目录 1.字符串概念和注意事项 2.字符串内置函数 3.字符串的索引、切片和遍历 4.字符串运算符 5.字符串常用方法 性质判断 开头结尾判断 是否存在某个子串 大小写等格式转化 子串替换 删除两端空白字符 格式化字符串 分割与合并 6.字符串模板 7.exec 函数 8.字符…

【Linux】-Zookeeper安装部署[17]

简介 apache ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、分布式同步、组服务等。 除了为Hadoop和H…

2024最新 Jenkins + Docker 实战教程(四) - 编写自己的Springboot项目实现自动化部署

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

VMware Num Lock 总自动切换的问题解决

VMware Num Lock 总自动切换的问题解决 0. 问题描述1. 解决方法 0. 问题描述 使用 VMware 虚拟机时&#xff0c;鼠标在 VMware 和主机之间切换时&#xff0c;总是显示 “Num Lock 开” 和 “Num Lock 关” 的提示框。 1. 解决方法 在 VMware 系统中&#xff0c;按 fn num 统…

0407放大电路的频率响应

放大电路的频率响应 单时间常数RC电路的频率响应中频响应高频响应低频响应全频域响应 放大电路频率响应概述1. 直接耦合放大电路频域响应阻容耦合放大电路频域响应 4.7.1 单时间常数RC电路的频率响应 4.7.2 放大电路频率响应概述 4.7.3 单级共射极放大电路的频率响应 4.7.4 单级…

TOSHIBA UTLH21 属于Unifi NV系列

TOSHIBA UTLH21 是东芝推出的一款工业控制器&#xff0c;属于Unifi NV系列。 这款控制器代表了东芝在工业自动化领域的一次重要进步&#xff0c;它在功能和性能上都超越了现有的V系列控制器。以下是UTLH21的一些主要特点&#xff1a; 高速逻辑与控制能力&#xff1a;UTLH21具…

Spring框架中获取方法参数名称:DefaultParameterNameDiscoverer

DefaultParameterNameDiscoverer 是Spring框架中用于获取方法参数名称的一个类。在Java中&#xff0c;方法的参数名称通常在编译时会丢失&#xff0c;因为Java字节码并不强制要求保留这些信息。Spring提供了一种机制来恢复这些参数名称&#xff0c;这就是通过DefaultParameterN…

IT行业的现状与未来趋势

这里写目录标题 一、引言二、IT行业的现状三、IT行业面临的挑战四、IT行业的未来趋势五、结论 一、引言 信息技术&#xff08;IT&#xff09;行业在过去几十年中经历了飞速发展&#xff0c;从早期的计算机硬件和软件开发&#xff0c;到如今涵盖云计算、人工智能、大数据、物联…

深度学习之基于Django+Tensorflow卷积神经网络实时口罩检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着全球疫情的持续&#xff0c;佩戴口罩成为了公众日常生活中不可或缺的一部分。特别是在人员密集的…

【python】python社交交友平台系统设计与实现(源码+数据库)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

BEVFuison测试全过程记录

cuda版本10.1 pytorch&#xff1a; 根据cuda版本选择pytorch版本&#xff1a; 1. 创建conda虚拟环境&#xff1a; conda create -y --name mmcv python3.8 conda activate mmcv2. 安装依赖库&#xff1a; pytorch: conda install pytorch1.7.1 torchvision0.8.2 torchaudi…

智能代理四大范式解析

Agent四大范式 在2024年红杉资本人工智能峰会上,著名的人工智能专家吴恩达发表了一场备受关注的演讲,深入探讨了智能代理(agent)的四大范式。这四大范式代表了当前AI技术在不同应用领域中的核心方法和实践,分别是反思(Reflection)、工具使用(Tool Use)、规划(Planni…

特征融合篇 | YOLOv8改进之引入轻量级跨尺度特征融合模块CCFM | 源自RT-DETR

前言:Hello大家好,我是小哥谈。CCFM(Cross-Scale Feature Fusion Module)即为跨尺度特征融合模块。这个模块的作用是将不同尺度的特征通过融合操作整合起来,以增强模型对于尺度变化的适应性和对小尺度对象的检测能力。CCFM可以有效地整合细节特征和上下文信息,从而提高模…

2024定制版抢单支付系统源码(开代理自动抢单接单)

随着网络和移动支付技术的不断进步&#xff0c;抢单支付系统已经成为商家和用户进行交易的便利工具。2024定制版抢单支付系统源码为开发者提供了一个可定制化的解决方案&#xff0c;具备开放代理和自动抢单接单功能&#xff0c;帮助用户快速搭建抢单支付平台。本文将为您介绍这…