html代碼塊
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>**javaScript動態添加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動態添加li元素 <ul id="J_List"> </ul> </body></html>js動態添加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動態添加Li元素代碼（方法2）
//方法2：用createElement創建li元素，再通過setAttribute設置元素屬性，最后通過appendChild()方法添加在父元素的最后一個子節點上。 //創建li標簽，包含顯示姓名，郵箱，電話號碼及刪除按鈕 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標簽，好設置樣式 function addSpan(li,text){ var span_1=document.createElement("span"); span_1.innerHTML=text; li.appendChild(span_1); } //添加刪除按鈕及設置刪除按鈕的樣式及添加點擊事件 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); } //為刪除按鈕添加刪除節點功能 function delBtnData(obj){ var ul=document.getElementById("J_List"); var oLi=obj.parentNode.parentNode; //obj.parentNode指刪除按鈕的span層 //obj.parentNode.parentNode為li層 ul.removeChild(oLi); } 知識點：innerHTML（需注意雙引號”或/ 需用 / 轉義）。
知識點：createElement創建元素，setAttribute設置元素屬性，innerHTML設置元素值，appendChild添加元素，parentNode獲取父節點（parentNode是W3C標準的，parentElement 只在IE中可用. ），removeChild刪除子節點。
以上這篇javaScript動態添加Li元素的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
