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>
文档碎片，理论上可提高性能。
时间： 2024-08-05 19:34:37