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