原生js插入HTML元素

最新推荐文章于 2024-04-21 15:25:48 发布

爱吃巧克li

最新推荐文章于 2024-04-21 15:25:48 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/lplovewjm/article/details/132427557

版权

JavaScript 专栏收录该内容

43 篇文章 2 订阅

订阅专栏

原生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>

爱吃巧克li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js插入HTML元素

方法，格式如下：根据id、className等找到这个元素，如果这个元素的id为a，2.afterbegin：在 element 元素的第一个子节点前面;3.beforeend：在 element 元素的最后一个子节点后面;1.beforebegin：在 element 元素的前面;4.afterend：在 element 元素的后面。如果需要多次判断插入，并且删除之前插入的元素，则可以用。比如我们想放在element元素后面，就可以这么写，
复制链接

扫一扫