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

原生js插入HTML元素

news 2026/3/31 17:33:16

原生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元素方法&#xff1a;insertAdjacentHTML insertAdjacentHTML语法格式 element.insertAdjacentHTML(position, text); 1&#xff09;position 是相对于 element 元素的位置&#xff0c;并且只能是以下的字符串之一&#xff1a; 1.beforebegin&#xff1a;在 ele…...

编程日记 2023/8/26 23:03:27

腾讯云V265/TXAV1直播场景下的编码优化和应用

// 编者按&#xff1a;随着视频直播不断向着超高清、低延时、高码率的方向发展&#xff0c; Apple Vision的出现又进一步拓展了对3D, 8K 120FPS的视频编码需求&#xff0c;视频的编码优化也变得越来越具有挑战性。LiveVideoStackCon 2023上海站邀请到腾讯云的姜骜杰老师分享腾…...

编程日记 2023/8/26 23:02:26

牛客练习赛114 G-图上异或难题(线性基)

题目要求把点涂成白和黑两种颜色&#xff0c;如果一条边左右两端是不同的颜色的话&#xff0c;结果就异或这跳边的权值&#xff0c;求结果最大是多少 把边的贡献转换成点的贡献 我们只考虑白色点的情况下&#xff0c;如果一个点A是白色&#xff0c;就把结果异或上这一个点A周…...

编程日记 2023/8/26 23:01:25

Neo4j之ORDER BY基础

ORDER BY 语句用于对查询结果进行排序。以下是一些常用的示例和解释&#xff1a; 按属性值排序&#xff1a; MATCH (p:Person) RETURN p.name, p.age ORDER BY p.age DESC这个示例返回所有人节点的姓名和年龄属性&#xff0c;并按年龄降序排序。 按多个属性排序&#xff1a;…...

编程日记 2023/8/26 23:00:24

【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 嘛&#xff1f; …...

编程日记 2023/8/26 22:59:22

MybatisPlus（1）

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 MyBatis-Plus&#xff08;简称MP&#xff09;是一个 Mybatis 的增强工具&…...

编程日记 2023/8/26 22:58:22

探索未来世界，解密区块链奥秘！

你是否曾好奇&#xff0c;区块链是如何影响着我们的生活与未来&#xff1f;想要轻松了解这个引领着技术革命的概念吗&#xff1f;那么这本令人着迷的新书《区块链导论》绝对值得你拥有&#xff01; 内容丰富多彩&#xff0c;让你轻松掌握&#xff1a; **1章&#xff1a;区块链…...

编程日记 2023/8/26 22:57:21

win10 下运行 npm run watch-poll问题

背景&#xff1a;在本地练习laravel项目&#xff0c;windows 宝塔环境&#xff08;之前装过ubuntu子系统&#xff0c;很慢&#xff0c;就放弃了。有知道的兄弟说下&#xff0c;抱拳&#xff09;。以下命令我是在本地项目中用git bash里运行的&#xff0c;最好用管理员权限打开你…...

编程日记 2023/8/26 22:56:19

Android平台RTMP|RTSP直播播放器功能进阶探讨

我们需要怎样的直播播放器&#xff1f; 很多开发者在跟我聊天的时候&#xff0c;经常问我&#xff0c;为什么一个RTMP或RTSP播放器&#xff0c;你们需要设计那么多的接口&#xff0c;真的有必要吗&#xff1f;带着这样的疑惑&#xff0c;我们今天聊聊Android平台RTMP、RTSP播放…...

编程日记 2023/8/26 22:55:17

Centos7安装Telnet服务

简述 Centos7安装Telnet服务 前情提示 Centos7安装Telnet服务 一说 ● 部分截图、链接等因过期、更换域名、MD语法等可能不显示&#xff0c;可联系反馈&#xff08;备注好博文地址&#xff09;&#xff0c;谢谢❤ ● 带有#号、删除线、不操作、不执行字样的为提示或者备份bash&…...

编程日记 2023/8/26 22:54:16

【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…...

编程日记 2023/8/26 22:53:15

前端面试：【算法】排序、查找、递归、动态规划

算法是计算机科学的核心&#xff0c;是解决问题的方法和步骤。在编程和软件开发中&#xff0c;了解和掌握各种常见算法至关重要。本文将详细介绍四种重要的算法&#xff1a;排序、查找、递归和动态规划&#xff0c;并提供示例来帮助你理解它们的应用。 1. 排序算法&#xff1a;…...

编程日记 2023/8/26 22:52:14

RK3399 开机自启一个shell脚本，一直起不来BUG

开机自启shell脚本如下&#xff1a; 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…...

编程日记 2023/8/26 22:51:12

[MyBatis系列④]核心配置文件

目录 1、简介 2、DTD 3、typeHandlers 3.1、默认类型处理器 3.2、自定义类型处理器 4、plugins ⭐MyBatis系列①&#xff1a;增删改查 ⭐MyBatis系列②&#xff1a;两种Dao开发方式 ⭐MyBatis系列③&#xff1a;动态SQL 1、简介 MyBatis的核心配置文件&#xff08;通常命…...

编程日记 2023/8/26 22:50:11

系统架构设计高级技能 · 层次式架构设计理论与实践

系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估&#xff08;二&#xff09;【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...

编程日记 2023/8/26 22:49:09

Nuxt3打包部署到Linux（node+pm2安装和运行步骤+nginx代理）

最近&#xff0c;我们项目组的工作接近尾声&#xff0c;需要把项目部署上线。由于前端第一次使用Nuxt3框架&#xff0c;后端也是第一次部署Nuxt3项目&#xff0c;所以刚开始出现了很多问题。在我上网搜索很多教程后&#xff0c;得到了基本的流程。 1.服务器安装node.js环境 N…...

编程日记 2023/8/26 22:48:07

一维数组传参

在C语言中&#xff0c;可以通过指针来传递一维数组。一维数组实际上是指向数组首元素的指针&#xff0c;在函数中传递数组参数时&#xff0c;可以将数组名作为指针传递给函数。以下是一个示例&#xff1a; #include <stdio.h>void myFunction(int arr[], int size) {for…...

编程日记 2023/8/26 22:47:06

七层、四层和五层网络模型区别和联系

七层、四层和五层网络模型区别和联系 概述OSI网络7层模型&#xff08;概念型框架&#xff09;概述图片分析 四层模型概述常用协议OSI与TCP/IP四层的区别 五层模型概述三种网络模型对比 总结 概述 网络模型-七层模型&#xff08;OSI模型&#xff09;、五层协议体系结构和TCP/IP…...

编程日记 2023/8/26 22:46:05

RH1288V3 - 初识物理服务器

如果你拥有一台物理服务器(不是云服务器) 个人比较推荐你用物理服务器&#xff0c;虽然性能会比云要来的差&#xff0c;但是不用每月交钱上。云服务固然方便&#xff0c;但是几个核的性能和一点存储&#xff0c;想做一个动漫网站固然要很多mp4这种影视资源&#xff0c;云服务器…...

编程日记 2023/8/26 22:45:03

excel中如果A列中某项有多条记录，针对A列中相同的项，将B列值进行相加合并统计

excel中如果A列中某项有多条记录&#xff0c;针对A列中相同的项&#xff0c;将B列值进行相加合并统计。注意&#xff1a;B列的数据类型要为数字 如&#xff1a; 实现方法&#xff1a; C1、D1中分别输入公式&#xff0c;然后下拉 IF(COUNTIF($A$1:A1,A1)1, A1,"") …...

编程日记 2023/8/26 22:44:02

Qwen3-14B企业知识图谱构建：从私有文档抽取实体关系实践

Qwen3-14B企业知识图谱构建&#xff1a;从私有文档抽取实体关系实践 1. 企业知识图谱构建概述 在当今企业数字化转型浪潮中&#xff0c;知识图谱作为结构化知识表示的重要方式&#xff0c;正成为企业知识管理的核心基础设施。传统知识图谱构建需要大量人工标注和规则设计&…...

编程新知 2026/3/31 16:36:19

Pi0具身智能v1快速部署指南：一键启动交互测试页面

Pi0具身智能v1快速部署指南&#xff1a;一键启动交互测试页面 1. 环境准备与镜像部署 1.1 选择合适的基础环境 在开始部署Pi0具身智能v1之前&#xff0c;请确保您的平台满足以下基本要求&#xff1a; 硬件配置&#xff1a;建议至少16GB显存的GPU&#xff08;如NVIDIA RTX 3…...

编程新知 2026/3/31 14:01:14

Python新手福音：借助快马AI零基础构建你的第一个行情网站

作为一个刚接触Python的新手&#xff0c;想要构建一个行情网站听起来可能有点吓人。但通过InsCode(快马)平台的AI辅助&#xff0c;整个过程变得异常简单。下面我就分享一下自己从零开始搭建第一个行情网站的经历。 数据获取部分 首先需要找到一个免费的金融数据接口。我选择了一…...

编程新知 2026/3/31 13:59:13

基于WebRTC的P2P文件传输系统：架构设计与实现原理

基于WebRTC的P2P文件传输系统&#xff1a;架构设计与实现原理 【免费下载链接】filepizza :pizza: Peer-to-peer file transfers in your browser 项目地址: https://gitcode.com/GitHub_Trending/fi/filepizza 在当今数字时代&#xff0c;文件传输已成为日常工作和协作…...

编程新知 2026/3/31 13:47:07

嘉立创PCB打样被加价到170元？手把手教你用STM32H743飞控板案例解决‘拆单嫌疑’

STM32H743飞控板PCB打样避坑指南&#xff1a;如何巧妙应对嘉立创拆单判定 最近不少硬件开发者在使用嘉立创进行STM32H743飞控板PCB打样时&#xff0c;遇到了一个令人头疼的问题——原本33元的4层板打样价格突然飙升到170多元。这种情况往往是由于平台算法误判设计文件存在"…...

编程新知 2026/3/31 13:32:55

快速部署MinerU镜像：开箱即用的PDF提取方案，告别繁琐配置

快速部署MinerU镜像&#xff1a;开箱即用的PDF提取方案&#xff0c;告别繁琐配置 1. 引言&#xff1a;为什么你需要一个“开箱即用”的PDF提取工具&#xff1f; 如果你曾经尝试过从一份复杂的PDF文档里提取文字、表格和公式&#xff0c;你大概率经历过这样的痛苦&#xff1a;…...

编程新知 2026/3/31 12:46:00

深入解析 snprintf 和 vsnprintf：安全格式化字符串的最佳实践

1. 为什么需要安全的字符串格式化 在C语言开发中&#xff0c;字符串格式化是最基础也最容易出问题的操作之一。我见过太多因为格式化字符串不当导致的缓冲区溢出漏洞&#xff0c;轻则程序崩溃&#xff0c;重则成为安全攻击的入口点。传统的sprintf函数就像个不设防的大门&#…...

编程新知 2026/3/31 12:23:42

5分钟搞定RetroArch缩略图：从黑屏到完美游戏封面的全攻略

5分钟搞定RetroArch缩略图&#xff1a;从黑屏到完美游戏封面的全攻略 【免费下载链接】RetroArch Cross-platform, sophisticated frontend for the libretro API. Licensed GPLv3. 项目地址: https://gitcode.com/GitHub_Trending/re/RetroArch 还记得打开RetroArch游戏…...

编程新知 2026/3/31 12:21:42

5个场景带你体验KISS Translator：让网页双语阅读不再是难题

5个场景带你体验KISS Translator&#xff1a;让网页双语阅读不再是难题 【免费下载链接】kiss-translator A simple, open source bilingual translation extension & Greasemonkey script (一个简约、开源的 双语对照翻译扩展 & 油猴脚本) 项目地址: https://gitcod…...

编程新知 2026/3/31 12:01:35

S2-Pro企业级监控告警集成：与Prometheus和Grafana的实战

S2-Pro企业级监控告警集成&#xff1a;与Prometheus和Grafana的实战 1. 为什么企业级AI服务需要监控告警 AI服务在生产环境运行时&#xff0c;就像一辆24小时行驶的汽车&#xff0c;需要仪表盘来显示各项关键指标。想象一下&#xff0c;如果你开车时看不到油量表、水温计和速…...

编程新知 2026/3/31 10:53:00