原生js插入HTML元素

简介: 原生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').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>
相关文章
|
10天前
|
前端开发 UED
学会了HTML中的块级元素和内联元素 SO 酷了
学会了HTML中的块级元素和内联元素 SO 酷了
学会了HTML中的块级元素和内联元素 SO 酷了
|
4天前
HTML元素(HTML Elements)的属性
【8月更文挑战第27天】HTML元素(HTML Elements)的属性。
12 2
|
8天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
23 4
|
8天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
19 2
|
9天前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
27 1
|
7天前
|
移动开发 前端开发 JavaScript
|
7天前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
34 0
|
7天前
|
10天前
|
移动开发 搜索推荐 开发者
HTML5结构元素深解语义化 div、section、article
HTML5结构元素深解语义化 div、section、article
|
10天前
|
前端开发 JavaScript SEO
如何精通HTML:掌握元素的全局公共属性秘籍
如何精通HTML:掌握元素的全局公共属性秘籍
下一篇
云函数