JS动态增加删除UL节点LI

最新推荐文章于 2021-10-31 12:45:07 发布

转载最新推荐文章于 2021-10-31 12:45:07 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cfinder010/p/3744881.html

文章标签：

#javascript #ViewUI

本文介绍如何使用JavaScript动态地增加和删除HTML中的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="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); 
} 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=txt; 
} 

} 
</script> 

转载于:https://www.cnblogs.com/cfinder010/p/3744881.html