原生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元素后面,就可以这么写,

javascript 复制代码
element('afterend',"<div>123</123>")

如果需要多次判断插入,并且删除之前插入的元素,则可以用remove方法,格式如下:根据id、className等找到这个元素,如果这个元素的id为a,

javascript 复制代码
document.getElementById(''a").remove()
javascript 复制代码
<!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').value
            for(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>
相关推荐
EutoCool8 分钟前
Qt窗口:菜单栏
开发语言·c++·嵌入式硬件·qt·前端框架
nightunderblackcat42 分钟前
新手向:使用Python将多种图像格式统一转换为JPG
开发语言·python
我爱Jack1 小时前
深入解析 LinkedList
java·开发语言
engchina1 小时前
Python PDF处理库深度对比:PyMuPDF、pypdfium2、pdfplumber、pdfminer的关系与区别
开发语言·python·pdf
拓端研究室1 小时前
专题:2025供应链数智化与效率提升报告|附100+份报告PDF、原数据表汇总下载
开发语言·php
一百天成为python专家2 小时前
python库之jieba 库
开发语言·人工智能·python·深度学习·机器学习·pycharm·python3.11
Go Dgg2 小时前
【Go + Gin 实现「双 Token」管理员登录】
开发语言·golang·gin
十五年专注C++开发2 小时前
hiredis: 一个轻量级、高性能的 C 语言 Redis 客户端库
开发语言·数据库·c++·redis·缓存
WJ.Polar2 小时前
Python数据容器-集合set
开发语言·python
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript