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>

来源:http://www.jb51.net/article/50294.htm

js怎么获取ul li 的id

document.getElementsByTagName("li")[index].id

如何用JavaScript获得ul中的li的个数?

document.getElementById(‘myul‘).getElementsByTagName(‘li‘).length

HTML DOM removeChild() 方法

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
时间: 2024-10-31 02:33:41

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

JS动态增加删除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>

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

假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode中.ssh目录中的authorized_keys和id_rsa 2.复制Hadoop运行目录.hdfs目录及tmp目录至新的DataNode 3.在新DataNode上启动hadoop ..sbin/hadoop-daemon.sh start datanode ..sbin/yarn-daemon

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

把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解. 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div.li.img 这样的标签.其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始. 一.js 动态添加元素div <div id="parent"

Repeater 动态增加删除一行

文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="rptTest.Default" %> <!DOCTYPE html

第五部分 架构篇 第十五章 MongoDB Replica Sets 架构(动态增加删除结点)

1.Replica Set增加结点 MongoDB Replica Set不仅提供高可用性的解决方案,它也同时提供负载均衡的解决方案,增减Replica Sets结点在实际应用中非常普遍,比如当应用的读压力暴增时,3台结点的环境已经不能满足需求,那么就需要增加一些结点将压力平均分配一下,当应用的压力小时,可以减少一些结点来减少硬件资源的成本,总是是一个长期且持续的工作. 官方给我们提供了2个方案用于增加结点,一种是通过oplog来增加结点,一种是通过数据库快照(--fastsync)和oplog

动态增加删除

<style type="text/css"> .x-j-ul{ } .x-j-btn{ width: 25px; height: 25px; border-radius: 50%; border: 1px solid #525252; color: #525252; cursor: pointer; } .x-j-ul>li:last-child{ margin-bottom: 0; } .x-j-ul>li:first-child .change-no{ d

redis cluster集群动态伸缩--删除主从节点

目标:从集群中剔除一组主从(5007,5008) 经过上一节增加5007,5008主从服务节点后,目前集群的情况是这样的: b3363a81c3c59d57143cd3323481259c044e66d2 192.168.8.196:[email protected] slave 1b7aa419065c5477c0def9d5e25106963fbdda76 0 1573003356000 3 connected 1b7aa419065c5477c0def9d5e25106963fbdda76

MVC中用jQuery加BootStrap实现动态增加删除文本输入框!

http://www.freejs.net/article_biaodan_278.html 这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆. 修改后效果如下 @model PwtsWeb.Models.PhoneNum @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-w

JQuery动态增加删除元素

<form action="" method="post" enctype="multipart/form-data"> <label>请选择上传的图片</label> <a href="javascript:addimg()">增加图片</a> <div class="mdiv" id="mdiv"> <di