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

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