建立和插入DOM節點
阿新 • • 發佈：2022-03-29
插入節點
獲得某個DOM節點，假設這個DOM節點是空的，通過innnerHTML就可以增加
一個元素，但是這個DOM節點已經存在元素，會產生覆蓋
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p id="js">JAVAscript</p> 9 10 <div id="list"> 11 <p id="aa">java1</p> 12 <p id="bb">java2</p> 13 <p id="cc">java3</p> 14 </div> 15 <script> 16 var js = document.getElementById('js');//已存在節點 17 var list = document.getElementById('list'); 18 19 list.append(js);//追加到後面20 //通過js建立新的節點 21 var newP = document.createElement('p');//建立一個P標籤 22 newP.id = 'newP'; 23 24 newP.innerText = 'helloWorld'; 25 list.appendChild(newP); 26 27 //建立一個標籤節點 28 var myScript = document.createElement('script'); 29 myScript.setAttribute('type','text/javascript');30 list.appendChild(myScript); 31 32 //建立一個Style標籤 33 var myStyle = document.createElement('style'); 34 // 35 myStyle.setAttribute('type','text/css'); 36 myStyle.innerHTML = 'body{background-color: grey;}';//設定標籤內容 37 var head = document.getElementsByTagName('head'); 38 head[0].appendChild(myStyle); 39 40 41 // insert插入到前面 42 var bb = document.getElementById('bb'); 43 var js = document.getElementById('js'); 44 var list = document.getElementById('list'); 45 //要包含的節點.insertBefore(newNode,targetNode) 46 list.insertBefore(js,bb); 47 48 </script> 49 50 </body> 51 </html>