JS动态增加删除UL节点LI及相关内容示例

136 阅读 0 评论 90 点赞

我是靠谱客的博主自觉鲜花，最近开发中收集的这篇文章主要介绍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="car_11">11111</option> 
<option value="car_22">22222</option> 
<option value="car_33">33333</option> 
<option value="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); 
} 

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=txt; 
} 

} 
</script> 