HTML DOM增删改查

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)

//        }

//    }

}