创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入li
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
文档碎片
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()
创建 <li>
1 <script> 2 window.onload= function () 3 { 4 var oBtn=document.getElementById('btn1'); 5 var oUl=document.getElementById('ull'); 6 var ali=document.getElementsByTagName('li'); 7 var oTxt=document.getElementById('txt'); 8 oBtn.onclick=function () 9 { 10 var oLi=document.createElement('li'); 11 //父级.appendChild(子节点); 12 //oUl.appendChild(oLi);//在已有元素后插入 13 oLi.innerHTML=oTxt.value; 14 //oUl.insertBefore(oLi,ali[0]);//在任意元素前插入 15 //为了兼容， 最好选择下面这种方法,原因是有时ul里会没有li标签 16 //alert(ali.length);//判断li的个数 17 if(ali.length>0) 18 { 19 oUl.insertBefore(oLi,ali[0]); 20 } 21 else{oUl.appendChild(oLi); } 22 } 23 24 25 } 26 </script> 27 </head> 28 29 <body> 30 31 <div id="divId"> 32 <input type="text" id="txt"/> 33 <input type="button" id="btn1" value="创建 li"/> 34 <ul id="ull"> 35 <li>jgjghmjnhg</li> 36 <li>1234255535</li> 37 <li>vmhmbmbmbh</li> 38 <li>6878987978</li> 39 </ul> 40 41 </div> 42 43 </body>
删除<li>
1 <script> 2 window.onload= function () 3 { 4 var aHref=document.getElementsByTagName('a'); 5 var oUl=document.getElementById('ull'); 6 for(var i=0 ; i<aHref.length;i++) 7 { 8 aHref[i].onclick=function () 9 { 10 oUl.removeChild(this.parentNode); 11 } 12 } 13 14 } 15 </script> 16 </head> 17 18 <body> 19 20 <div id="divId"> 21 22 <ul id="ull"> 23 <li>jgjghmjnhg <a href="javascript:;">删除</a></li> 24 <li>1234255535 <a href="javascript:;">删除</a></li> 25 <li>vmhmbmbmbh <a href="javascript:;">删除</a></li> 26 <li>6878987978 <a href="javascript:;">删除</a></li> 27 </ul> 28 29 </div> 30 31 </body>