溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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：用innerHTML
document.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元素的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
