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() {

//創(chuàng)建新標簽

varli=document.createElement("li");

//獲取li

varlist_li=list.getElementsByTagName("li");

//獲取li長度并賦值給變量num

varnum=list_li.length+1;

//創(chuàng)建新標簽的內(nèi)容

vartext=document.createTextNode(num);

//將內(nèi)容追加到新標簽里

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("哈哈哈");

//將內(nèi)容追加到新標簽里

li.appendChild(text);

//? ? ? ? 將新的內(nèi)容添加到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)

//? ? ? ? }

//? ? }

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容