首页 > 代码库 > JS动态增加删除UL节点LI
JS动态增加删除UL节点LI
JS如何动态增加删除UL节点LI及相关内容。
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> <li id=3>33333333333333333<a href="javascript:del(3);">del</a></li> <li id=4>44444444444444444<a href="javascript:del(4);">del</a></li> <li id=5>55555555555555555<a href="javascript:del(5);">del</a></li> </ul> <select name="car_type" id="car_type" onchange="add_car(this);" > <option value="">please select</option> <option value="http://www.mamicode.com/car_11">11111</option> <option value="http://www.mamicode.com/car_22">22222</option> <option value="http://www.mamicode.com/car_33">33333</option> <option value="http://www.mamicode.com/car_44">44444</option> </select > <input type="text" id="ul_value" onclick="getulvalue();" name="ul_value" value=""> <script> function $$(id){ var obj=document.getElementById(id); return obj; } function del(n) { $$(‘ul‘).removeChild($$(n)); } function add(id,txt) { var ul=$$(‘ul‘); var li= document.createElement("li"); var href_a = document.createElement("a"); href_a.href="javascript:del(‘"+id+"‘);"; href_a.innerHTML ="del"; li.innerHTML=txt; li.id=id; li.appendChild(href_a); ul.appendChild(li); } www.jbxue.com function add_car(obj){ //chk ul childNodes length if($$(‘ul‘).childNodes.length<3){ var flag=true; var ul_obj=$$(‘ul‘).childNodes; var car_id=obj.options[obj.selectedIndex].value; var txt=obj.options[obj.selectedIndex].text; if(car_id!=null&&car_id!=""){ for(var i=0;i<ul_obj.length;i++){ if(ul_obj[i].id==car_id){ alert("已经添加!"); flag=false; } } if(flag){ add(car_id,txt); } } }else{ alert("只允许加入三个值!"); return; } } function getulvalue(){ if($$(‘ul‘).childNodes.length==0){ alert("请选择相关内容!"); return; }else{ var txt=""; for(var i=0;i<$$(‘ul‘).childNodes.length;i++){ txt+=$$(‘ul‘).childNodes[i].id+","; } $$("ul_value").value=http://www.mamicode.com/txt; } } </script>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。