html代碼塊
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>**javaScript動(dòng)態(tài)添加Li元素**</title> <style type="text/css"> ul li{list-style:none;display:block;text-align:left;}ul li span{display:inline-block;margin-top:5px;margin-right:35px;} </style> <script type="text/javascript"> //add code </script> <body> //此處為ul動(dòng)態(tài)添加li元素 <ul id="J_List"> </ul> </body></html>js動(dòng)態(tài)添加Li元素代碼（方法1）
var userName="Tom"; var userEamil="12345678@qq.com"; var userPhone="12345678910"; //方法1：用innerHTMLdocument.getElementById("J_List").innerHTML+="<li class=/"newLi/"><span>"+_userName+"<//span><span>"+userEamil+"<//span><span>"+userPhone+"<//span><span><input type=/"button/" value=/"刪除/" onclick=/"this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)/" //><//span><//li>";js動(dòng)態(tài)添加Li元素代碼（方法2）
//方法2：用createElement創(chuàng)建li元素，再通過(guò)setAttribute設(shè)置元素屬性，最后通過(guò)appendChild()方法添加在父元素的最后一個(gè)子節(jié)點(diǎn)上。 //創(chuàng)建li標(biāo)簽，包含顯示姓名，郵箱，電話號(hào)碼及刪除按鈕 function addLi(useName,useEamil,usePhone){ var li_1=document.createElement("li"); li_1.setAttribute("class","newLi"); addSpan(li_1,userName); addSpan(li_1,userEamil); addSpan(li_1,userPhone); addDelBtn(li_1);document.getElementById("J_List").appendChild(li_1); } //為姓名或郵箱等添加span標(biāo)簽，好設(shè)置樣式 function addSpan(li,text){ var span_1=document.createElement("span"); span_1.innerHTML=text; li.appendChild(span_1); } //添加刪除按鈕及設(shè)置刪除按鈕的樣式及添加點(diǎn)擊事件 function addDelBtn(li){ var span_1=document.createElement("span"); var btn=document.createElement("button"); btn.setAttribute("type","button"); btn.setAttribute("class","delBtn"); btn.setAttribute("onclick","delBtnData(this)"); btn.innerHTML="刪除"; span_1.appendChild(btn); li.appendChild(span_1); } //為刪除按鈕添加刪除節(jié)點(diǎn)功能 function delBtnData(obj){ var ul=document.getElementById("J_List"); var oLi=obj.parentNode.parentNode; //obj.parentNode指刪除按鈕的span層 //obj.parentNode.parentNode為li層 ul.removeChild(oLi); } 知識(shí)點(diǎn)：innerHTML（需注意雙引號(hào)”或/ 需用 / 轉(zhuǎn)義）。
知識(shí)點(diǎn)：createElement創(chuàng)建元素，setAttribute設(shè)置元素屬性，innerHTML設(shè)置元素值，appendChild添加元素，parentNode獲取父節(jié)點(diǎn)（parentNode是W3C標(biāo)準(zhǔn)的，parentElement 只在IE中可用. ），removeChild刪除子節(jié)點(diǎn)。
以上這篇javaScript動(dòng)態(tài)添加Li元素的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答
圖片精選
