实现如下的功能
非常简单的一个小训练。
思想：
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>
其实代码非常简单，自己写写，练习一下熟练度。