js创建节点，小试牛刀

实现如下的功能

非常简单的一个小训练。

思想：

1.首先创建text和一个button

代码如下、

1 <body>
2 <input type="text" id="text1"/>
3 <input id="btn1" type="button"  value="创建" />
4 <ul>
5     
6 </ul>
7     
8 </body>

2.用js createElement('li');创建li标签放进ul里面

js代码如下

 1 <script>
 2 window.onload=function(){
 3     var oBtn=document.getElementById("btn1");
 4     var text1=document.getElementById("text1");
 5     var oUl =document.getElementsByTagName("ul")[0];
 6     
 7     oBtn.onclick=function()
 8     {
 9        var oLi=document.createElement('li');    //创建一个没有内容的li标签
10        var isLi=oUl.getElementsByTagName('li');   //获取li数组
11        if (isLi.length>0)   //判断ul里面有没有li标签，如果有，将创建的li放在所有li[0]的前面
12        {
13             oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
14               oUl.insertBefore(oLi, isLi[0]);
15        }
16        else  //否则直接添加到ul上，即是没有li标签在ul上
17        {
18          oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
19          oUl.appendChild(oLi);
20        }
21 
22        //删除功能
23        var oA=oUl.getElementsByTagName("a");
24        if(oA) //如果a标签存在
25        {
26            for(var i=0;i<isLi.length;i++)
27            {
28                 oA[i].onclick=function()  //点解a标签就删除其父节点，。即是li标签
29                 {
30                     oUl.removeChild(this.parentNode);
31                 }
32            }
33        }
34  
35     }
36 };
37 </script>

其实代码非常简单，自己写写，练习一下熟练度。

posted @ 2016-09-07 22:16  MrPat  阅读(196)  评论(0)  编辑  收藏  举报