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>

JS动态增加删除UL节点LI的更多相关文章

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

    <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...

  2. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  3. Hadoop 2.6.3动态增加/删除DataNode节点

    假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...

  4. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  5. js 动态添加元素(div、li、img等)及设置属性

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...

  6. js 动态添加元素 删除元素逻辑

    js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...

  7. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  8. Repeater 动态增加删除一行

    文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...

  9. js 二分搜索树删除子节点

    删除的节点含有左子树或者右子树,用其子树来代替成为被删除节点的父节点的子树 删除左右都有孩子的节点,找到右边子树最小的节点作为父节点

随机推荐

  1. MyEclipse开发Rest服务入门

    MyEclipse支持Rest服务,开发起来非常方便,下面我就举一个计算机的例子: 实现功能:加.减.乘.除: 效果如下: Rest服务要点:每个服务或任何东西都有一个URI: 步骤1:创建Web S ...

  2. PHP高级教程-安全邮件

    PHP Secure E-mails 在上一节中的 PHP e-mail 脚本中,存在着一个漏洞. PHP E-mail 注入 首先,请看上一章中的 PHP 代码: <html> < ...

  3. eclipse git提交代码

    1.安装git 2.安装好后,进行,一个简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configuration 设置自定义仓库 3.登 ...

  4. Android中保存静态秘钥实践(转)

    本文我们将讲解一个Android产品研发中可能会碰到的一个问题:如何在App中保存静态秘钥以及保证其安全性.许多的移动app需要在app端保存一些静态字符串常量,其可能是静态秘钥.第三方appId等. ...

  5. jsp&html页面知识点集锦

      CreateTime--2016年12月16日16:08:03Author:Marydonjsp&html页面知识点集锦1.标签的class属性 标签同时拥有多个class时,要写在同一个 ...

  6. 【docker】挂载web应用

    现在将webapps目录挂载在宿主机目录,方便运维 docker run -p 8090:8080 --name app -v /usr/app:/usr/local/tomcat/webapps d ...

  7. JAVA虚拟机内存架构

    Java在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途.创建和销毁的时间,有一些是随虚拟机的启动而创建,随虚拟机的退出而销毁,有些则是与线程一一对应,随 ...

  8. shell之“>/dev/null 2>&1”

    shell之“>/dev/null 2>&1” http://ixdba.blog.51cto.com/2895551/526442 今天在自己的一个技术群中又被问道了这么一个问题 ...

  9. 阿里云ESC搭建SVN服务端

    CentOS7)下yum命令快速安装svn服务端,学习在思考中独孤中度过,在孤独中进取! 01.SVN服务的安装(subversion) 02.ESC安全组策略 1.在线安装svn服务 $ sudo  ...

  10. Linear Algebra Courses

    Lecture 1:Demonstrate the columns of a matrix (imagine the vectors) in N-dimension space.How to mult ...