
实现如下的功能
非常简单的一个小训练。
思想:
1.首先创建text和一个button
代码如下、
<body>
<input type="text" id="text1"/>
<input id="btn1" type="button" value="创建" />
<ul> </ul> </body>
2.用js createElement('li');创建li标签放进ul里面
js代码如下
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
var text1=document.getElementById("text1");
var oUl =document.getElementsByTagName("ul")[0]; oBtn.onclick=function()
{
var oLi=document.createElement('li'); //创建一个没有内容的li标签
var isLi=oUl.getElementsByTagName('li'); //获取li数组
if (isLi.length>0) //判断ul里面有没有li标签,如果有,将创建的li放在所有li[0]的前面
{
oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
oUl.insertBefore(oLi, isLi[0]);
}
else //否则直接添加到ul上,即是没有li标签在ul上
{
oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
oUl.appendChild(oLi);
} //删除功能
var oA=oUl.getElementsByTagName("a");
if(oA) //如果a标签存在
{
for(var i=0;i<isLi.length;i++)
{
oA[i].onclick=function() //点解a标签就删除其父节点,。即是li标签
{
oUl.removeChild(this.parentNode);
}
}
} }
};
</script>
其实代码非常简单,自己写写,练习一下熟练度。