创建和插入DOM节点
插入节点
获得某个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>
