Title
#electli{
width:100px;
height:20px;
background:#c4e3f3;
float:left;
list-style:none;
text-align:center;
margin-left:10px;
font-size:7px;
line-height:20px;
}
#listli{
width:100px;
height:20px;
background:#78c6e3;
list-style:none;
text-align:center;
margin-top:10px;
font-size:7px;
line-height:20px;
}
#list{
clear:both;
padding-top:10px;
text-align:center;
}
添加
删除第一个
删除最后一个
替换
//获取对象
varlist=document.getElementById("list");
varapp=document.getElementById("app");
vardelF=document.getElementById("delF");
vardelL=document.getElementById("delL");
varupdate=document.getElementById("update");
//添加
app.onclick=function() {
//创建新标签
varli=document.createElement("li");
//获取li
varlist_li=list.getElementsByTagName("li");
//获取li长度并赋值给变量num
varnum=list_li.length+1;
//创建新标签的内容
vartext=document.createTextNode(num);
//将内容追加到新标签里
li.appendChild(text);
// 将标签追加到ul里
list.appendChild(li);
// li.innerHTML=list_li.length
//点击删除
for(vari=0;i
list_li[i].onclick=function() {
list.removeChild(this)
}
}
}
//删除第一个
delF.onclick=function() {
list.removeChild(list.firstChild)
}
//删除最后一个
delL.onclick=function() {
list.removeChild(list.lastChild)
}
//替换
update.onclick=function() {
varli=document.createElement("li");
vartext=document.createTextNode("哈哈哈");
//将内容追加到新标签里
li.appendChild(text);
// 将新的内容添加到li里 replaceChild(新元素,被替换的元素)
list.replaceChild(li,list.lastChild);
varlist_li=list.getElementsByTagName("li");
// 点击替换
// for(var i=0;i
// list_li[i].onclick=function () {
// list.replaceChild(li,this)
// }
// }
}
