当前位置：首页 > news >正文

前端学习-操作元素内容（二十二）

news 2026/4/3 6:22:59

前言

目标

对象.innerText 属性

对象.innerHTML属性

案例

年会抽奖

需求

方法一

方法二

总结

前言

曾经沧海难为水，除却巫山不是云。

目标

能够修改元素的文本更换内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象，就是操作对象使用的点语法。如果想要修改标签元素的里面的内容，则可以使用如下几种方式学习路径:

对象.innerText 属性

元素innerText 属性将文本内容添加/更新到任意标签位置显示纯文本，不解析标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box { width: 100px; height: 100px;}</style><body><div class="box"> 这是文字的内容</div><script> const box = document.querySelector('.box'); console.log(box.innerText); box.innerText = '<strong>这是修改后的内容</strong>';//不解析标签</script></body></html>

对象.innerHTML属性

元素.innerHTML属性将文本丙容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box { width: 100px; height: 100px;}</style><body><div class="box"> 这是文字的内容</div><script> const box = document.querySelector('.box'); console.log(box.innerText); box.innerHTML = '<strong>这是修改后的内容</strong>';</script></body></html>

案例

年会抽奖

需求

从数组随机抽取一等奖、二等奖和三等奖，显示到对应的标签里面。素材:

html文件结构数组名单周杰伦', '刘德华', '郭富城', '周润发', '周星驰', '张学友

方法一

定义数组

添加监听器

获取随机数

使用类选择器进行选择

输出结果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box { width: 100px; height: 100px;}</style><body><div class="honor"> <strong>年会抽奖</strong> <h1>一等奖 <span id="one">???</span></h1> <h1>二等奖 <span id="two">???</span></h1> <h1>三等奖 <span id="three">???</span></h1> <button id="btn">开始</button></div><script> const arr = ['周杰伦', '刘德华', '郭富城', '周润发', '周星驰', '张学友']; document.getElementById('btn').addEventListener('click', function () { if (arr.length === 0) { alert('所有奖项已抽完！'); return; } const randomOne = Math.floor(Math.random() * arr.length); document.getElementById('one').innerHTML = arr[randomOne]; arr.splice(randomOne, 1); if (arr.length > 0) { const randomTwo = Math.floor(Math.random() * arr.length); document.getElementById('two').innerHTML = arr[randomTwo]; arr.splice(randomTwo, 1); } if (arr.length > 0) { const randomThree = Math.floor(Math.random() * arr.length); document.getElementById('three').innerHTML = arr[randomThree]; arr.splice(randomThree, 1); } console.log(arr); });</script></body>

方法二

数组 prizeIds：定义了一个包含奖项 id 的数组 prizeIds，这样可以通过循环来访问每个奖项对应的 span 元素。
for 循环：使用 for 循环来遍历 prizeIds 数组，并且在每次循环中检查 arr 是否还有剩余元素。
随机选择和更新：在循环内部，随机选择一个数组元素并将其设置为对应奖项的 span 元素的文本内容，然后从数组中移除该元素。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box { width: 100px; height: 100px;}</style><body><div class="honor"> <strong>年会抽奖</strong> <h1>一等奖 <span id="one">???</span></h1> <h1>二等奖 <span id="two">???</span></h1> <h1>三等奖 <span id="three">???</span></h1> <button id="btn">开始</button></div><script> const arr = ['周杰伦', '刘德华', '郭富城', '周润发', '周星驰', '张学友']; const prizeIds = ['one', 'two', 'three']; document.getElementById('btn').addEventListener('click', function () { if (arr.length === 0) { alert('所有奖项已抽完！'); return; } for (let i = 0; i < prizeIds.length && arr.length > 0; i++) { const randomIndex = Math.floor(Math.random() * arr.length); document.getElementById(prizeIds[i]).innerHTML = arr[randomIndex]; arr.splice(randomIndex, 1); } console.log(arr); });</script></body>

总结

如果喜欢的人要嫁人了，就跟她表白，就算为此要把婚车的车轴打爆也没关系，这是你说出来的最后机会。把这个秘密带进棺材没价值，连陪葬都算不上

前端学习-操作元素内容（二十二）

目录前言目标对象.innerText 属性对象.innerHTML属性案例年会抽奖需求方法一方法二总结前言曾经沧海难为水，除却巫山不是云。目标能够修改元素的文本更换内容 DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象，…...

编程日记 2024/12/19 15:13:52

【踩坑】pip离线+在线在虚拟环境中安装指定版本cudnn攻略

pip离线在线在虚拟环境中安装指定版本cudnn攻略在线安装离线安装Windows环境：Linux环境： 清华源官方帮助文档 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ 标题的离线的意思是先下载whl文件再安装到虚拟环境，在线的意思是直接在当前虚…...

编程日记 2024/12/19 15:12:51

golang操作sqlite3加速本地结构化数据查询

目录摘要Sqlite3SQLite 命令SQLite 语法SQLite 数据类型列亲和类型——优先选择机制 SQLite 创建数据库SQLite 附加数据库SQLite 分离数据库 SQLite 创建表SQLite 删除表 SQLite Insert 语句SQLite Select 语句SQLite 运算符SQLite 算术运算符SQLite 比较运算符SQLite 逻辑运算…...

编程日记 2024/12/19 15:11:45

vllm加速（以Qwen2.5-7B-instruction为例）与流式响应

1. vllm介绍什么是vllm? vLLM 是一个高性能的大型语言模型推理引擎，采用创新的内存管理和执行架构，显著提升了大模型推理的速度和效率。它支持高度并发的请求处理，能够同时服务数千名用户，并且兼容多种深度学习框架，…...

编程日记 2024/12/19 15:04:38

WordPress弹窗公告插件-ts小陈

使用效果使用后网站所有页面弹出窗口插件特色功能设置弹窗公告样式：这款插件可展示弹窗样式公告，用户点击完之后不再弹出，不会频繁打扰用户。可设置弹窗中间的logo图：这款插件针对公告图片进行独立设置，你可以在设…...

编程日记 2024/12/19 14:57:31

【ELK】容器化部署Elasticsearch1.14.3集群【亲测可用】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 1. 部署1.1 单节点1.2 新节点加入集群1.3 docker-compose部署集群 1. 部署按照官网流程进行部署使用 Docker 安装 Elasticsearch |Elasticsearch 指南 [8.14] |…...

编程日记 2024/12/19 14:55:29

[SAP ABAP] ALV状态栏GUI STATUS的快速创建

使用事务码SE38进入到指定程序，点击"显示对象列表"按钮鼠标右键，选择"GUI状态" 弹出【创建状态】窗口，填写状态以及短文本描述以后，点击按钮点击"调整模板"，复制已有程序的状态栏填…...

编程日记 2024/12/19 14:52:24

【Linux】NET9运行时移植到低版本GLIBC的Linux纯内核板卡上

背景介绍自制了一块Linux板卡(基于全志T113i) 厂家给的SDK和根文件系统能够提供的GLIBC的版本比较低 V2.25/GCC 7.3.1 这个版本是无法运行dotnet以及dotnet生成的AOT应用的我用另一块同Cortex-A7的板子运行dotnet的报错版本不够，运行不了而我的板子是根本就识…...

编程日记 2024/12/19 14:51:23

深入浅出支持向量机（SVM）

1. 引言支持向量机（SVM, Support Vector Machine）是一种常见的监督学习算法，广泛应用于分类、回归和异常检测等任务。自1990年代初期由Vapnik等人提出以来，SVM已成为机器学习领域的核心方法之一，尤其在模式识别、文本…...

编程日记 2024/12/19 14:50:21

脚手架安装与配置安装node node -> 16.20.2 切换淘宝镜像 npm install -g cnpm -registryhttp://registry.npm.taobao.orgnpm config set registry http://registry.npm.taobao.org/使用了第二个,下一步才有用安装vue npm install -g vue/clivscode中不给运行vue解…...

编程日记 2024/12/19 14:48:18

基于Docker的Minio分布式集群实践

目录 1. 说明 2. 配置表 3. 步骤 3.1 放行服务端口 3.2 docker-compose 编排 4. 入口反向代理与负载均衡配置 4.1 api入口 4.2 管理入口 5. 用例 6. 参考 1. 说明以多节点的Docker容器方式实现minio存储集群，并配以nginx反向代理及负载均衡作为访问入口。…...

编程日记 2024/12/19 14:44:14

Scala 的迭代器

迭代器定义：迭代器不是一种集合，它是一种用于访问集合的方法。迭代器需要通过集合对应的迭代器调用迭代器的方法来访问。支持函数式编程风格，便于链式操作。创建一个迭代器，相关代码如下： object Test {def mai…...

编程日记 2024/12/19 14:42:12

vue实现文件流形式的导出下载

文章目录 Vue 项目中下载返回的文件流操作步骤一、使用 Axios 请求文件流数据二、设置响应类型为 ‘blob’三、创建下载链接并触发下载四、在 Vue 组件中集成下载功能五、解释与实例说明1、使用 Axios 请求文件流数据：设置响应类型为 blob：创建下载链接并…...

编程日记 2024/12/19 14:40:08

【DIY飞控板PX4移植】深入理解NuttX下PX4串口配置：ttyS设备编号与USARTUART对应关系解析

深入理解NuttX下PX4串口配置：ttyS设备编号与USART&UART对应关系解析引言问题描述原因分析结论引言在嵌入式系统开发中，串口（USART/UART）的配置是一个常见但关键的任务。对于使用 NuttX 作为底层操作系统的飞控系统&#x…...

编程日记 2024/12/19 14:37:04

【报错解决】vsvars32.bat 不是内部或外部命令，也不是可运行的程序或批处理文件

报错信息： 背景问题：Boost提示 “cl” 不是内部或外部命令，也不是可运行的程序或批处理文件时， 按照这篇博客的方法【传送】添加了环境变量后，仍然报错： 报错原因： vsvars32.bat 的路径不正…...

编程日记 2024/12/19 14:35:02

CTFshow-文件上传(Web151-170)

CTFshow-文件上传(Web151-170) 参考了CTF show 文件上传篇（web151-170，看这一篇就够啦）-CSDN博客 Web151 要求png，然后上传带有一句话木马的a.png，burp抓包后改后缀为a.php，然后蚁剑连接，找fl…...

编程日记 2024/12/19 14:33:59

深度学习基础--将yolov5的backbone模块用于目标识别会出现怎么效果呢？？

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊前言 yolov5网络结构比较复杂，上次我们简要介绍了yolov5网络模块，并且复现了C3模块，深度学习基础–yolov5网络结构简介&a…...

编程日记 2024/12/19 14:29:55

操作系统（16）I/O软件

前言操作系统I/O软件是负责管理和控制计算机系统与外围设备（例如键盘、鼠标、打印机、存储设备等）之间交互的软件。一、I/O软件的定义与功能定义：I/O软件，也称为输入/输出软件，是计算机系统中用于管理和控制设备与主…...

编程日记 2024/12/19 14:27:52

leetcode437.路径总和III

标签：前缀和问题：给定一个二叉树的根节点 root ，和一个整数 targetSum ，求该二叉树里节点值之和等于 targetSum 的路径的数目。路径不需要从根节点开始，也不需要在叶子节点结束，但是路径方向必须是向下…...

编程日记 2024/12/19 14:24:50

WebGPU、WebGL 和 OpenGL/Vulkan对比分析

WebGPU、WebGL 和 OpenGL/Vulkan 都是用于图形渲染和计算的图形API，但它们的设计理念、功能和适用场景有所不同。以下是它们的总结和对比分析： 1. WebGPU WebGPU 是一个新的、现代化的图形和计算API，设计目的是为Web平台提供更接近硬件的性…...

编程日记 2024/12/19 14:22:48

创建使用费曼学习技能，让 AI 帮你快速学习新领域知识（实战教程）

看完一篇文章、学习一个知识，当时感觉懂了。过三天，有人问你，你发现说不清楚。又或者准备运用这个知识，尝试解决问题，又觉得似是而非。这不是记忆力的问题，是你从来没有真正理解过它。有个方法专门解决这件…...

编程新知 2026/4/3 6:05:04

【bilibili-downloader】：突破4K画质限制的B站视频下载工具：给视频收藏爱好者的高效解决方案

【bilibili-downloader】：突破4K画质限制的B站视频下载工具：给视频收藏爱好者的高效解决方案【免费下载链接】bilibili-downloader B站视频下载，支持下载大会员清晰度4K，持续更新中项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/3 5:52:59

深入探索Java JPA中的CriteriaQuery

在Java持久化API（JPA）中，CriteriaQuery 提供了强大的查询功能，允许我们以面向对象的方式构建动态查询。今天我们将通过一个实际的例子，深入探讨如何使用CriteriaQuery来获取特定书籍的最新更新ID。什么是CriteriaQuery? CriteriaQuery是JPA的一部分，它提供了一种类型…...

编程新知 2026/4/3 4:39:46

POIKit：地理数据全流程处理的高效解决方案

POIKit：地理数据全流程处理的高效解决方案【免费下载链接】AMapPoi POI搜索工具、地理编码工具项目地址: https://gitcode.com/gh_mirrors/am/AMapPoi 价值定位：重新定义地理数据采集效率行业痛点与技术突破在地理信息领域，传统…...

编程新知 2026/4/3 2:13:38

Python AOT编译成本如何从$280K/年压至$49K/年？2026前最后窗口期的6个不可逆决策点

第一章：Python AOT编译成本断崖式下降的战略本质Python 长期以来被诟病于运行时开销高、启动慢、内存占用大，其核心瓶颈在于 CPython 解释器的字节码解释执行机制。而近年来，以 Nuitka、Cython（搭配 --aot 模式）、以及…...

编程新知 2026/4/3 1:26:44

ANDOVER PS120/240电源模块

ANDOVER PS120/240 电源模块是一款工业控制系统用电源设备，主要用于为控制器、I/O 模块及相关设备提供稳定的直流或交流电源。一、基本概述型号：PS120/240类型：电源模块用途：为工业控制系统提供稳定可靠的电力支持二、主要功能提供…...

编程新知 2026/4/2 23:57:57

数字化转型深水区：技术从“支撑”到“驱动”的蜕变

对于身处一线的软件测试从业者而言，“数字化转型”早已不是一个陌生的词汇。我们经历了从手工测试到自动化测试的转变，见证了敏捷与DevOps带来的流程革新。然而，当转型浪潮进入“深水区”，一种更为根本的变革正在发生：…...

编程新知 2026/4/2 23:18:59

用MATLAB搞定模电实验：单管共射放大电路静态工作点与放大倍数的保姆级仿真

MATLAB仿真单管共射放大电路：从理论到实践的完整指南引言在电子工程领域，单管共射放大电路是模拟电路设计的基石之一。传统实验教学中，学生往往需要花费大量时间搭建实体电路、调整参数并测量数据，这不仅效率低下，…...

编程新知 2026/4/2 22:48:23

LIN总线‘智能调度’到底怎么玩？一个汽车雨刮案例讲透事件触发与偶发帧

LIN总线智能调度实战：汽车雨刮系统的动态事件处理与性能优化雨滴敲击挡风玻璃的瞬间，现代汽车的智能雨刮系统已经完成了从感知到响应的全套动作。这背后是LIN总线在主从架构下对事件触发、偶发调度和诊断插入的精密协调——本文将用工程视角拆解这套机制…...

编程新知 2026/4/2 22:34:06

Cisco Packet Tracer实战：从零搭建一个带冗余和ACL策略的企业网络（附完整配置命令）

Cisco Packet Tracer企业网络实战：冗余架构与ACL策略深度解析第一次在Packet Tracer中搭建完整企业网络时，我被VLAN间通信、HSRP热备切换和ACL策略的连锁反应彻底难住了。记得那个深夜，当错误配置的ACL导致整个财务部门网络瘫痪时&#xff0…...

编程新知 2026/4/2 22:32:01

前言

目标

对象.innerText 属性

对象.innerHTML属性

案例

年会抽奖

需求

方法一

方法二

总结

相关文章：