以下為通過JS對li標簽進行簡單的增刪改查：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> //定義變量，保存選中的標簽 var selectLi; //定義變量，保存修改了的標簽 var editedLi=false; window.onload=function() { //新增li標簽到末尾 document.getElementById("insertEnd").onclick = insertEndclick; //新增li標簽到指定位置 var liObj=document.getElementsByTagName("li"); for(var i=0;i<liObj.length;i++) { liObj[i].onclick = liChoose; } document.getElementById("insert").onclick = insertThere; //刪除指定標簽 document.getElementById("delete").onclick = deleteli; //修改指定標簽內容 document.getElementById("edit").onclick = editLi; //將選中的該標簽變為文本框進行內容修改 document.getElementById("edit2").onclick = editLi2; //將文本框中的內容保存 document.getElementById("save").onclick = saveLi; } //新增li標簽到末尾 function insertEndclick() { var result = prompt("需要插入的li標簽文本：", "小黑"); if (result) { var newli = document.createElement("li"); newli.innerHTML = result; newli.onclick = liChoose; document.getElementById("ulList").appendChild(newli); } } //新增li標簽到指定位置 function insertThere() { if (selectLi) { var result = prompt("需要插入的li標簽文本：", "小黑"); if (result) { var newli = document.createElement("li"); newli.innerHTML = result; //需要給新增的li標簽設置點擊事件 newli.onclick = liChoose; document.getElementById("ulList").insertBefore(newli, selectLi); } } else { alert("請先選擇要插入的位置"); } } //高亮選中的標簽 function liChoose() { var ul = document.getElementsByTagName("li") for (var i = 0; i < ul.length; i++) { ul[i].style.backgroundColor = "white"; } this.style.backgroundColor = "yellow"; selectLi = this; } //刪除指定標簽 function deleteli() { if (selectLi) { selectLi.parentElement.removeChild(selectLi); } else { alert("請先選中要刪除的標簽"); } } //修改指定標簽 function editLi() { if(selectLi) { var result = prompt("輸入修改內容", "大白"); if(result) { selectLi.innerHTML = result; } } else { alert("請選擇要修改的標簽"); } } //將選中的該標簽變為文本框進行內容修改 function editLi2() { if(selectLi) { //創建一個文本框 var newli = document.createElement("input"); newli.type = "text"; //將文本框內容設置為li標簽的文本值 newli.value = selectLi.innerHTML; //將文本框添加到li標簽內部 selectLi.removeChild(selectLi.childNodes[0]); selectLi.appendChild(newli); editedLi = true; } } //將文本框中的內容保存 function saveLi() { if (editedLi) { var editValue = selectLi.childNodes[0].value; selectLi.innerHTML = editValue; } else { alert("沒有標簽在編輯狀態"); } } </script> </head> <body> <div> <input type="button" id="insertEnd" value="新增到末尾" /> <input type="button" id="insert" value="新增到指定位置" /> <input type="button" id="delete" value="刪除" /> <input type="button" id="edit" value="修改" /> <input type="button" id="edit2" value="將選中標簽變為文本標簽進行修改" /> <input type="button" id="save" value="保存" /> </div> <ul id="ulList"> <li>小貓</li> <li>小魚</li> <li>小狗</li> <li>大象</li> <li>樹懶</li> </ul> </body> </html>