原生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,"") …...
蓝桥杯备赛:Floyd、Bellman-Ford、Dijkstra,三大最短路算法到底怎么选?(附场景对比与代码模板)
蓝桥杯竞赛:Floyd、Bellman-Ford、Dijkstra三大最短路算法实战指南 在算法竞赛的战场上,最短路问题就像是一道必考题,而Floyd、Bellman-Ford和Dijkstra这三大算法则是解题的利器。但很多选手在面对具体问题时常常陷入选择困难:该用…...
LAVIS深度解析:语言视觉智能库的架构设计与视觉问答实现原理
LAVIS深度解析:语言视觉智能库的架构设计与视觉问答实现原理 【免费下载链接】LAVIS LAVIS - A One-stop Library for Language-Vision Intelligence 项目地址: https://gitcode.com/gh_mirrors/la/LAVIS 语言视觉智能库LAVIS、视觉问答VQA、多模态AI、BLIP模…...
Win11系统升级后如何快速恢复MySQL数据库
1. Win11升级后MySQL恢复的常见场景 最近帮朋友处理了一个典型问题:他的Win11系统升级后,原本运行正常的MySQL服务突然无法启动,项目数据库全部"消失"。这种情况其实很常见——系统升级或重装时,注册表信息、环境变量和…...
Z-Image-Turbo_Sugar脸部Lora赋能网络安全:生成模拟人脸进行隐私保护测试
Z-Image-Turbo_Sugar脸部Lora赋能网络安全:生成模拟人脸进行隐私保护测试 1. 引言:当网络安全遇上AI造脸 你有没有想过,那些用来保护我们手机、门禁的人脸识别系统,到底安不安全?安全研究员们每天都在琢磨这个问题。…...
从AMP到cuFFT:半精度训练中非2的幂维度问题的深度解析与实战规避
1. 从报错信息看半精度训练中的cuFFT限制 最近在调试一个深度学习模型时,遇到了这样的报错:"RuntimeError: cuFFT only supports dimensions whose sizes are powers of two when computing in half precision"。这个错误看似简单,…...
【王阳明】《泛海》
王阳明《泛海》:证道诗与心学宣言原诗险夷原不滞胸中, 何异浮云过太空? 夜静海涛三万里, 月明飞锡下天风。一、创作背景:九死一生的逃亡 这首诗写于王阳明人生最险峻的时刻,背景远比字面所呈现的更为惊心动…...
大麦智能抢票系统:告别手速极限的终极解决方案
大麦智能抢票系统:告别手速极限的终极解决方案 【免费下载链接】ticket-purchase 大麦自动抢票,支持人员、城市、日期场次、价格选择 项目地址: https://gitcode.com/GitHub_Trending/ti/ticket-purchase 还在为抢不到热门演唱会门票而烦恼吗&…...
MediaPipe模型优化:从性能瓶颈到实时推理的全流程解决方案
MediaPipe模型优化:从性能瓶颈到实时推理的全流程解决方案 【免费下载链接】mediapipe Cross-platform, customizable ML solutions for live and streaming media. 项目地址: https://gitcode.com/GitHub_Trending/med/mediapipe 问题发现:计算机…...
UDOP-large算力优化:FP16推理+FlashAttention加速UDOP-large响应速度
UDOP-large算力优化:FP16推理FlashAttention加速UDOP-large响应速度 1. 为什么你的UDOP-large模型跑得不够快? 如果你用过UDOP-large这个文档理解模型,可能会发现一个问题:处理文档图片的时候,有时候响应速度不够理想…...
AutoDL部署大模型后,除了Chat:手把手教你用本地API接口玩转文档总结、代码生成和智能客服
AutoDL部署大模型后,除了Chat:手把手教你用本地API接口玩转文档总结、代码生成和智能客服 当你已经在AutoDL上成功部署了大语言模型,并验证了基础的聊天功能后,是否思考过如何将这些能力真正融入日常工作流?本文将带你…...
