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