你的位置:首页 > Java教程

[Java教程]JS学习第二课


 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.value15           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>

文档碎片,理论上可提高性能。