`
tanglong8848
  • 浏览: 72865 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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>

分享到:
评论

相关推荐

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

    在本文中,我们将详细探讨如何使用JavaScript动态地操作UL元素(无序列表)和其子元素LI(列表项)的增加和删除操作。 首先,创建基本的HTML结构是必要的。如示例所示,我们有一个UL元素,其ID为“ul”,里面包含了...

    javaScript动态添加Li元素的实例

    JavaScript动态添加Li元素是前端开发中常见的一项技术,可以将新的列表项(li元素)动态添加到现有的HTML文档中。在给定的文件内容中,包含了两种主要的技术实现:使用innerHTML和使用createElement。下面将对这两种...

    javascript动态修改Li节点值的方法.docx

    ### JavaScript 动态修改 Li 节点值的方法 #### 概述 在Web开发中,经常需要通过JavaScript来动态地操作DOM元素,比如修改列表项(`&lt;li&gt;`元素)的内容。这种需求常见于交互式的网站应用中,例如允许用户编辑页面上...

    使用Ul标签控制的树(tree)

    2. **子节点**:每个`&lt;li&gt;`元素表示一个节点,如果一个节点有子节点,则在其内部再嵌套一个`&lt;ul&gt;`,并用相应的`&lt;li&gt;`表示子节点。 3. **展开和折叠**:通过JavaScript或者CSS实现树的展开和折叠功能。可以添加额外的...

    JS做的树形菜单,自定义添加节点

    总之,"JS做的树形菜单,自定义添加节点"项目展示了JavaScript在创建动态、交互式用户界面方面的强大能力。通过理解DOM操作、事件处理、递归以及可能的CSS技巧,开发者可以创建出高效、可定制的树形菜单,满足各种...

    JavaScript使用ul中li标签实现删除效果

    如果某个li元素的className属性为“hover”,则说明它应该是被删除的元素,于是使用其父节点的“removeChild”方法将其从DOM中移除。值得注意的是,在移除元素后,循环的索引i需要减1,这是因为删除操作导致了数组...

    左树节点动态拖到右侧面板

    本文将详细讲解如何利用JavaScript和ZTree实现一个功能,允许用户将左侧面板中的树节点动态拖放到右侧面板,并在右侧面板中动态加载相应的div和样式。 首先,ZTree是一个强大的JavaScript插件,它基于jQuery,主要...

    javascript动态修改Li节点值的方法

    在本文中,我们将深入探讨如何使用JavaScript动态修改`&lt;li&gt;`(列表项)节点的值,这对于创建交互式网页列表非常有用。 首先,我们需要理解HTML文档对象模型(DOM,Document Object Model)。DOM是HTML或XML文档的一...

    Jquery和JS获取ul中li标签的实现方法

    通过JQuery,我们还可以轻松为li元素添加或删除class属性,从而改变其样式。例如,下面的代码示例了如何在点击li元素时,切换其背景色,并且改变其父元素ul的样式: ```javascript $(function() { $('.anserdh li'...

    jQuery实现删除li节点的方法

    本知识点将详细介绍如何使用jQuery实现删除列表项(li节点)的方法。 ### jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库,它以简化HTML文档遍历和操作、事件处理、动画和Ajax交互而闻名。通过利用...

    js动态树菜单(只供参考)

    下面我们将深入探讨如何创建一个JS动态树菜单,并涉及相关的编程概念和技术。 首先,树菜单的基础是HTML结构。一个简单的树节点通常包含一个父级(根节点)和多个子节点。这些节点可以通过`&lt;ul&gt;`和`&lt;li&gt;`标签来表示...

    练习2:访问当当购物车页面节点

    我们可以使用DOM API来查找、遍历、修改甚至添加页面中的任何节点。例如,如果购物车页面有一个特定的ID为"cart-items"的`&lt;div&gt;`元素,我们可以使用JavaScript的`document.getElementById()`方法获取这个节点: ```...

    JavaScript中Dom操作实例详解.docx

    JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...

    html5中JavaScript removeChild 删除所有节点

    通过JavaScript,我们可以添加、修改或者删除HTML页面中的节点。其中,删除节点是一个常用的操作。在本例中,我们将详细介绍如何使用JavaScript的removeChild方法删除HTML中的所有子节点。 首先,需要了解的是,...

    用标签和js实现树节点的拖曳

    在树形结构中,`&lt;ul&gt;`通常用来表示一个层级,而`&lt;li&gt;`则表示该层级下的一个节点。通过嵌套`&lt;ul&gt;`和`&lt;li&gt;`,我们可以构建出多级的树形结构。 接下来,我们要引入JavaScript来实现拖曳功能。在ASP.NET中,虽然后端...

    js 获取元素下面所有li的两种方法

    通过JavaScript对DOM的API进行操作,开发者可以读取文档中的节点,修改节点的内容,添加新的节点或者删除节点等。 现在,让我们详细介绍两种获取所有&lt;li&gt;元素的方法。 方法一:使用getElementById和...

    【JavaScript源代码】JavaScript实现留言板添加删除留言.docx

    该案例的重点在于使用JavaScript来处理用户输入的数据,并在网页上动态地添加和删除这些数据。虽然此案例没有涉及后端数据库的操作,但对于理解前端编程中的DOM操作、事件监听等核心概念具有重要意义。 #### 二、...

Global site tag (gtag.js) - Google Analytics