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

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。
经测试代码如下：

<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> 
/**
 * 动态增加删除UL节点LI
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
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>