原生dom操作快速写入html渲染(insertAdjacentHTML)

// 旧方法
const btn = document.createElement('div')
btn.id = 'material-btn-id'
btn.className = 'material-btn'
btn.textContent = '素材库'
document.body.appendChild(btn)
btn.addEventListener('click', () => {// 点击事件
})
// 新方法
const btn = document.createElement('div')
const newButtonHtml = '<div id="material-btn-id" class="material-btn">素材库</div>'
btn.insertAdjacentHTML('beforeend', newButtonHtml)
btn.addEventListener('click', () => {// 点击事件
})

insertAdjacentHTML用法详解(点击跳转)

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

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

相关文章

软件开发小程序正规公司流程是什么样的?

正规软件开发的流程可以清晰地分为以下几个阶段&#xff0c;每个阶段都有其特定的目标和产出&#xff1a; 项目开发目的分析与确定&#xff1a; 此阶段主要是在软件开发商将开发项目确定下来之后&#xff0c;与需求方进行讨论&#xff0c;明确软件开发的目标及其具体需要实现…

NumPy 切片和索引

NumPy 切片和索引 NumPy 是 Python 中用于科学计算的核心库之一&#xff0c;它提供了一个强大的 N 维数组对象和许多用于操作这些数组的函数。在数据处理和数值计算中&#xff0c;切片和索引是常用的操作&#xff0c;它们允许我们有效地访问和修改数组的部分数据。本文将详细介…

调试的时候给打印加颜色

在 C 中&#xff0c;打印紫色文本通常涉及使用控制台的特定颜色输出。在大多数操作系统中&#xff0c;控制台颜色是通过特殊的转义序列来实现的。这些转义序列可以在输出文本之前插入&#xff0c;以改变文本的颜色、样式或其他属性。 使用 ANSI 转义序列 在 POSIX 兼容的系统&…

Altair 人工智能技术助力MABE预测消费者行为,实现设备性能优化

主要看点 行业&#xff1a; 家电行业 挑战&#xff1a; 企业面临的挑战是如何利用已收集的大量数据&#xff0c;深入了解消费者在产品使用过程中对某些保鲜程序的影响。 Altair 解决方案&#xff1a; Altair采用了Altair RapidMiner人工智能平台来解决问题&#xff0c;特别是…

QML Controls模块-标准对话框用法说明

文章目录 颜色对话框文件对话框字体对话框自定义对话框通知对话框在QML中,Qt提供了一个名为 QtQuick.Controls的模块,其中包含了一系列用户界面控件,可以用于创建现代化、响应式的用户界面。在QtQuick.Controls模块中,一些控件可以用来调用标准对话框,包括文件对话框、字体…

Java进阶示例

使用DataFrame和SQL查询处理数据 在Spark中&#xff0c;DataFrame是一种以结构化方式处理数据的强大工具&#xff0c;它允许用户以类似于SQL的方式操作数据&#xff0c;提供了比RDD更高的抽象层次和更好的性能。下面的示例将展示如何使用Spark SQL的DataFrame API来读取CSV数据…

docker安装消息队列mq中的rabbit服务

在现代化的分布式系统中&#xff0c;消息队列&#xff08;Message Queue, MQ&#xff09;已经成为了一种不可或缺的组件。RabbitMQ作为一款高性能、开源的消息队列软件&#xff0c;因其高可用性、可扩展性和易用性而广受欢迎。本文将详细介绍如何在Docker环境中安装RabbitMQ服务…

2024.6.18 刷题总结

2024.6.18 **每日一题** 2288.价格减免&#xff0c;这是一道纯字符串的题目&#xff0c;我们的目标是识别出字符串中的价格并将它替换为折扣后的数字。这道题利用了一些字符串的关键字&#xff1a; stringstream 是C标准库中的一个类&#xff0c;属于 <sstream> 头文件…

八股系列 Flink

Flink 和 SparkStreaming的区别 设计理念方面 SparkStreaming&#xff1a;使用微批次来模拟流计算&#xff0c;数据已时间为单位分为一个个批次&#xff0c;通过RDD进行分布式计算 Flink&#xff1a;基于事件驱动&#xff0c;是面向流的处理框架&#xff0c;是真正的流式计算…

网络学习(13)|Spring Boot中获取HTTP请求头(Header)内容的详细解析

文章目录 方法一&#xff1a;使用HttpServletRequest实现原理代码示例优点缺点适用场景 方法二&#xff1a;使用RequestContextHolder实现原理代码示例优点缺点适用场景 方法三&#xff1a;使用RequestHeader注解实现原理代码示例优点缺点适用场景 总结 在Spring Boot应用中&am…

访问学者谈CSC青年骨干教师项目出国经历及感受

CSC青年骨干教师出国研修项目实施已近20年&#xff0c;越来越多的青年教师成为该项目的受益者。知识人网小编推荐该项目资助老师谈谈在加拿大卡尔加里大学访学一年的经历及感受。 国家留学基金委&#xff08;以下简称CSC&#xff09;高等学校青年骨干教师出国研修项目&#xff…

41、商城系统(二十二):Sentinel实现熔断、降级、限流

目录 一、熔断、降级、限流 1.什么是熔断 2.什么是降级 3.什么是限流 二、整合Sentinel初体验 1.引入依赖 2.官网下载dashboard可视化页面 3.配置参数 4.启动服务 三、实时监控没数据,流控响应结果自定义 1.实时监控没有数据 2.自定义流控返回结果 四、解决rabbi…

弹性云是否支持按量计费?

一、什么是弹性云&#xff1f; 弹性云&#xff0c;顾名思义&#xff0c;是一种能够根据用户需求动态调整计算资源的云计算服务。它打破了传统IT架构的束缚&#xff0c;通过虚拟化技术将物理资源转化为可灵活调配的虚拟资源&#xff0c;从而实现了计算资源的弹性扩展与缩减。这…

SQL: 将一个表中查出来数据插入到另一个表中

SQL&#xff1a; 将一个表中查出来数据插入到另一个表中 表数据字段不同&#xff1a; insert into A(a,b,c) (select a,b,c from B);表数据字段相同&#xff1a; insert into A select * from B;A是一个表 B是一个表 a,b,c是字段 2、假如A表不存在 select a,b,c into A fro…

个股期权有哪些股票?金融新手必须知道!

今天带你了解个股期权有哪些股票&#xff1f;在中国的股票市场中&#xff0c;个股期权是一种衍生品&#xff0c;允许投资者购买或卖出特定股票的期权合约。 个股期权有哪些股票&#xff1f; 个股期权是指在特定时间内&#xff0c;以特定价格买入或卖出特定数量的某只个股的权利…

lombok.jar包,解决 java: 找不到符号 符号: 类 __

打开设置在这里添加这样一小句话. -Djps.track.ap.dependenciesfalse

赛氪网荣膺“创新型中小企业”称号,科技创新再显卓越实力

近日&#xff0c;北京市经济和信息化局揭晓了2024年度3月份北京市创新型中小企业的光荣名单&#xff0c;其中北京环球赛乐科技有限公司&#xff08;简称赛氪网&#xff09;脱颖而出&#xff0c;再度展现其在创新领域的卓越实力&#xff01; 作为早已跻身“高企之光”行列的佼佼…

COUNTIF函数除计数,还可排序哦

COUNTIF函数除统计个数外&#xff0c;还可以排序哦&#xff01; 近期工作中遇到一个场景“对不同类型的人员按办理量进行排序”&#xff0c;前期只是对同一种类型进行排序&#xff0c;经过查阅资料&#xff0c;可以用COUNTIF函数解决问题&#xff0c;今天就把COUNTIF函数的用法…

CORE公链

CORE公链采用了结合了工作量证明&#xff08;Proof of Work&#xff0c;PoW&#xff09;和委托权益证明&#xff08;Delegated Proof of Stake&#xff0c;DPoS&#xff09;的共识机制。具体来说&#xff0c;CORE公链利用了比特币的PoW算法来确保网络的安全性&#xff0c;同时引…

EarMaster pro 7 For Mac软件下载-EarMaster Pro(音乐赏析进阶专业版)V6.1下载附加详细安装步骤

EarMaster pro 7 For Mac最新版是一款相当专业的听力训练和音乐理论练习软件&#xff0c;这个EarMaster pro 7 For Mac版带来了全的操作界面&#xff0c;并且更新了课程信息&#xff0c;内置了2000多种课程供用户选择&#xff0c;可以用于听耳训练、视唱和节奏训练等操作。 安 …