标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oBtn=document.getElementById(‘btn1‘) 9 var oUl=document.getElementById(‘ul1‘) 10 var oTxt=document.getElementById(‘text1‘) 11 oBtn.onclick=function(){ 12 var oLi=document.createElement(‘li‘) 13 var aLi=oUl.getElementsByTagName(‘li‘) 14 oLi.innerHTML=oTxt.value 15 if(aLi.length>0){ 16 oUl.insertBefore(oLi,aLi[0]) 17 } 18 else{ 19 oUl.appendChild(oLi) 20 } 21 } 22 } 23 </script> 24 </head> 25 <body> 26 <input type="text" id="text1" /> 27 <input type="button" id="btn1" value="creat lis" /> 28 <ul id="ul1"></ul> 29 </body> 30 </html>
创建DOM元素，这里有几个小事项需要注意。
第一：光写createlement是不够的，后面必须要和appendChild或者insertBefore搭配使用才会有创建DOM的效果。
第二：appendChild在IE7里是有问题的，注意看，我们的UL里一开始是没有li的，所以aLi[0]在IE7里是读不出来的。这里用了一个if else结构解决这个问题。
第三：我们这里实现了将Text里，我们输入的文字转到新建的li里。用的是innerHTML这个代码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function() 8 { 9 var oUl=document.getElementById(‘ul1‘) 10 var aA=document.getElementsByTagName(‘a‘) 11 for(i=0;i<aA.length;i++){ 12 aA[i].onclick=function(){ 13 oUl.removeChild(this.parentNode) 14 } 15 } 16 } 17 </script> 18 </head> 19 <body> 20 <ul id="ul1"> 21 <li>1111111111<a href="#">delete</a></li> 22 <li>2222222222<a href="#">delete</a></li> 23 <li>3333333333<a href="#">delete</a></li> 24 <li>4444444444<a href="#">delete</a></li> 25 <li>5555555555<a href="#">delete</a></li> 26 </ul> 27 </body> 28 </html>
这里只需要注意这点
oUl.removeChild(this.parentNode)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oUl=document.getElementById(‘ul1‘) 9 var oFrag=document.createDocumentFragment() 10 for(i=0;i<10000;i++){ 11 var oLi=document.createElement(‘li‘) 12 oFrag.appendChild(oLi) 13 } 14 oUl.appendChild(oFrag) 15 } 16 </script> 17 </head> 18 <body> 19 <ul id="ul1"></ul> 20 </body> 21 </html>
文档碎片，理论上可提高性能。
标签：
原文地址：http://www.cnblogs.com/zhouliang/p/5432319.html
