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>