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