原生js插入HTML元素
原生js插入HTML元素方法：insertAdjacentHTML
insertAdjacentHTML语法格式
element.insertAdjacentHTML(position, text);
1）position 是相对于 element 元素的位置，并且只能是以下的字符串之一：
1.beforebegin：在 element 元素的前面;
2.afterbegin：在 element 元素的第一个子节点前面;
3.beforeend：在 element 元素的最后一个子节点后面;
4.afterend：在 element 元素的后面。
比如我们想放在element元素后面，就可以这么写，
element('afterend',"<div>123</123>")
如果需要多次判断插入，并且删除之前插入的元素，则可以用remove方法，格式如下：根据id、className等找到这个元素，如果这个元素的id为a，
document.getElementById(''a").remove()
<!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>
<body><!-- 找出不含有重复字符的最长字串的长度 --><input id="tts" type="text" placeholder="请输入字符串" value=""><button onclick="Selects()">筛选</button><div id="one"></div><script>function Selects(){let text=0,temp=0;let Texts=document.getElementById('tts').valuefor(let i=0;i<=Texts.length;i++){if(Texts[i]==Texts[i+1]){if(text<temp){text=temp}temp=0}else{temp++;}}if(document.getElementById('two')){document.getElementById('two').remove()}document.getElementById('one').insertAdjacentHTML('afterend','<div id="two">'+text+"</div>")return text;}</script>
</body>
</html>
相关文章：
原生js插入HTML元素
原生js插入HTML元素方法：insertAdjacentHTML insertAdjacentHTML语法格式 element.insertAdjacentHTML(position, text); 1）position 是相对于 element 元素的位置，并且只能是以下的字符串之一： 1.beforebegin：在 ele…...
腾讯云V265/TXAV1直播场景下的编码优化和应用
// 编者按：随着视频直播不断向着超高清、低延时、高码率的方向发展， Apple Vision的出现又进一步拓展了对3D, 8K 120FPS的视频编码需求，视频的编码优化也变得越来越具有挑战性。LiveVideoStackCon 2023上海站邀请到腾讯云的姜骜杰老师分享腾…...
)
牛客练习赛114 G-图上异或难题(线性基)
题目要求把点涂成白和黑两种颜色，如果一条边左右两端是不同的颜色的话，结果就异或这跳边的权值，求结果最大是多少 把边的贡献转换成点的贡献 我们只考虑白色点的情况下，如果一个点A是白色，就把结果异或上这一个点A周…...
Neo4j之ORDER BY基础
ORDER BY 语句用于对查询结果进行排序。以下是一些常用的示例和解释： 按属性值排序： MATCH (p:Person) RETURN p.name, p.age ORDER BY p.age DESC这个示例返回所有人节点的姓名和年龄属性，并按年龄降序排序。 按多个属性排序：…...
【C++杂货铺】探索vector的底层实现
文章目录 一、STL1.1 什么是STL?1.2 STL的版本1.3 STL的六大组件 二、vector的介绍及使用2.1 vector的介绍2.2 vector的使用2.2.1 vector的定义2.2.2 vector iterator2.2.3 vector空间增长问题2.2.4 vector增删查改 2.3 vector\<char\> 可以替代 string 嘛？ …...
MybatisPlus（1）
前言🍭 ❤️❤️❤️SSM专栏更新中，各位大佬觉得写得不错，支持一下，感谢了！❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 MyBatis-Plus（简称MP）是一个 Mybatis 的增强工具&…...
探索未来世界，解密区块链奥秘！
你是否曾好奇，区块链是如何影响着我们的生活与未来？想要轻松了解这个引领着技术革命的概念吗？那么这本令人着迷的新书《区块链导论》绝对值得你拥有！ 内容丰富多彩，让你轻松掌握： **1章：区块链…...
win10 下运行 npm run watch-poll问题
背景：在本地练习laravel项目，windows 宝塔环境（之前装过ubuntu子系统，很慢，就放弃了。有知道的兄弟说下，抱拳）。以下命令我是在本地项目中用git bash里运行的，最好用管理员权限打开你…...
Android平台RTMP|RTSP直播播放器功能进阶探讨
我们需要怎样的直播播放器？ 很多开发者在跟我聊天的时候，经常问我，为什么一个RTMP或RTSP播放器，你们需要设计那么多的接口，真的有必要吗？带着这样的疑惑，我们今天聊聊Android平台RTMP、RTSP播放…...
Centos7安装Telnet服务
简述 Centos7安装Telnet服务 前情提示 Centos7安装Telnet服务 一说 ● 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤ ● 带有#号、删除线、不操作、不执行字样的为提示或者备份bash&…...
【C++】GCC对应C++的版本支持
1、查看当前GCC的版本 pffNUC12WSKi7:~$ gcc -v Using built-in specs. COLLECT_GCCgcc COLLECT_LTO_WRAPPER/usr/lib/gcc/x86_64-linux-gnu/9/lto-wrapper OFFLOAD_TARGET_NAMESnvptx-none:hsa OFFLOAD_TARGET_DEFAULT1 Target: x86_64-linux-gnu Configured with: ../src/co…...
前端面试：【算法】排序、查找、递归、动态规划
算法是计算机科学的核心，是解决问题的方法和步骤。在编程和软件开发中，了解和掌握各种常见算法至关重要。本文将详细介绍四种重要的算法：排序、查找、递归和动态规划，并提供示例来帮助你理解它们的应用。 1. 排序算法：…...
RK3399 开机自启一个shell脚本，一直起不来BUG
开机自启shell脚本如下： diff --git a/device/rockchip/common/sepolicy/file_contexts b/device/rockchip/common/sepolicy/file_contexts index eb6b5e4bb4..0bbe781a7c 100755 --- a/device/rockchip/common/sepolicy/file_contextsb/device/rockchip/common/se…...
[MyBatis系列④]核心配置文件
目录 1、简介 2、DTD 3、typeHandlers 3.1、默认类型处理器 3.2、自定义类型处理器 4、plugins ⭐MyBatis系列①：增删改查 ⭐MyBatis系列②：两种Dao开发方式 ⭐MyBatis系列③：动态SQL 1、简介 MyBatis的核心配置文件（通常命…...
系统架构设计高级技能 · 层次式架构设计理论与实践
系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA（一）【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估（二）【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...
Nuxt3打包部署到Linux（node+pm2安装和运行步骤+nginx代理）
最近，我们项目组的工作接近尾声，需要把项目部署上线。由于前端第一次使用Nuxt3框架，后端也是第一次部署Nuxt3项目，所以刚开始出现了很多问题。在我上网搜索很多教程后，得到了基本的流程。 1.服务器安装node.js环境 N…...
一维数组传参
在C语言中，可以通过指针来传递一维数组。一维数组实际上是指向数组首元素的指针，在函数中传递数组参数时，可以将数组名作为指针传递给函数。以下是一个示例： #include <stdio.h>void myFunction(int arr[], int size) {for…...
七层、四层和五层网络模型区别和联系
七层、四层和五层网络模型区别和联系 概述OSI网络7层模型（概念型框架）概述图片分析 四层模型概述常用协议OSI与TCP/IP四层的区别 五层模型概述三种网络模型对比 总结 概述 网络模型-七层模型（OSI模型）、五层协议体系结构和TCP/IP…...
RH1288V3 - 初识物理服务器
如果你拥有一台物理服务器(不是云服务器) 个人比较推荐你用物理服务器，虽然性能会比云要来的差，但是不用每月交钱上。云服务固然方便，但是几个核的性能和一点存储，想做一个动漫网站固然要很多mp4这种影视资源，云服务器…...
excel中如果A列中某项有多条记录，针对A列中相同的项，将B列值进行相加合并统计
excel中如果A列中某项有多条记录，针对A列中相同的项，将B列值进行相加合并统计。注意：B列的数据类型要为数字 如： 实现方法： C1、D1中分别输入公式，然后下拉 IF(COUNTIF($A$1:A1,A1)1, A1,"") …...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性： 隐藏字段的实现细节 提供对字段的受控访问 访问控制： 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性： 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑： 可以…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...