js动态增加ul节点li及input

        之前也做过有关节点的追加或者删除，但相对下面我要介绍的功能简单多了，都是单个节点的追加或者删除。下面小编将这个功能大概介绍一下。

        这个功能的目的是创建多级专区，类似书籍的目录那种的，如下图：

        这个功能的具体添加步骤如下：

1、创建根专区

        首先，在上图input框中输入一级专区的名称，如果符合需求将展示在页面上，如下图：

        如果只添加一级专区，直接点击‘创建’按钮即可。

本段代码如下：

<div class="veri">
	<p id="verip">
		<input type="text" value="" id="mucharea" data-id="input" defvalue="请输入一级专区的名称">
		<input type="button" value="确定" id="arersure">
		<span id="plhoder" style="color:#ccc; margin:0px 0px 0px 25px;">所有专区名称均限30个字符</span>
	</p>
</div>
<div class="verizong" style="display:none;">
	<div class="verione">
		<input type="button" value="" id="firsearea" >
		<a class="polidy">编辑</a><a href="javascript:;" class="bigrout">删除</a><a class="add" id="addBtn" this-id="add">添加子专区</a>
	</div>
	<div class="veribig">
		<div id="veritwo">
			<ul class="zqBar_cont">
                <div class="onezq">
                    <ul class="two">
                    	<!-- 子专区将追加到这里 -->
                    </ul>
                </div>
	        </ul>
		</div>
	</div>
	<p id="ps" style="display:none;"> 
		<input type="button" id="vericreat" value="创建">
		<span id="tshitwo">请确保所有子专区名称均已填写再创建</span>
	</p>
</div>
<script type="text/javascript">
//创建一级根专区
$('#arersure').click(function(){
	var mucharea = $('#mucharea').val();
	if(mucharea == "" || mucharea =="请输入一级专区的名称"){  //一级根专区为空
		$('#plhoder').text('专区名称不可为空').css('color','red');
	}else{
		//专区名称校验
		$.post("{:U('admin/AppsList/checkStrNum')}",{name:mucharea,num:1},function(data){  //长度校验
			if(data==1){
				$('#plhoder').text('仅限30个字符').css({'color':'red'});
				return false;
			}else{
				$.post("{:U('admin/AppsList/checkRootName')}",{groupname:mucharea},function(data){  //名称是否重复
					if(data==1){
						$('#plhoder').text('此名称已经存在').css({'color':'red'});
						return false;
					}else{   //创建成功
						arrname[0] = mucharea;
						$('#plhoder').text('所有专区名称均限30个字符');
						$('#firsearea').val(mucharea);
						$('.veri').hide();
						$('.verizong').show();
						$('.veribig').hide();
						$('#ps').show();
					}
				})
			}
		})
	}	
})
</script>

2、添加子专区
       如果想要继续添加下级子专区，则点击‘添加子专区’按钮，会弹出一个添加的弹出框，效果如下：          

        该弹框是一个div，在里面追加input，默认情况下，会追加一个input，代码如下：

<div class="popUP">
    <h5>添加子专区<span class="close">X</span></h5>
    <p>请按Enter键输入多个子专区名称（每行一个，共10行，每个仅限30字符）</p>
    <div class="pupCont">
    </div>
    <div class="btns">
        <input type="button" id="sureBtn1" value="确认"><input type="button" id="cancelBtn" value="取消">
    </div>
</div>

<script type="text/javascript">
$('#addBtn').click(function(){
    index = 1;  //用于页面取值时，判断层级
    $('.popUP').Popss({PopName:'.popUP',closeName:''});
	$('body').css({"overflow":"scroll","overflow-y":"hidden"});
	$('.pupCont').find('input').val('').eq(0).show().siblings().remove();
	var $input = $('<input type="text" clas="inputTits"><span></span></br>');
    $('.pupCont').append($input);
    $input.focus();
})

$('.pupCont').on('keyup','input',function(ev){
	if(ev.keyCode == 13){    //enter事件
		var inputTxt = $(this).val();
		var inputTxtLen = inputTxt.replace(/[\u4E00-\u9FA5]/g,'aa').length;
		createInput();     //追加input
		$(this).blur();
		if(inputTxtLen>30){    //判断input输入框中字符的长度
			$(this).next().text('仅限30个字符');
			return false;
		}else{
			$(this).next().text('');
		}
	}
})

function createInput(){
    var $input = $('<input type="text" clas="inputTits"><span></span></br>');
    inputlen = $('.pupCont').find('input').length;
    if(inputlen >= 10){    //判断input的长度，最大允许10个
    	return false;
    }else{
    	$('.pupCont').append($input);
    	$input.focus();
    }  
}
</script>

 

        上图弹框中，如果点击‘取消’或者右上角‘X’按钮，则情况弹框中的内容；如果点击‘确定’按钮，则追加这些专区到页面，如下：

<script type="text/javascript">
$('.close,#cancelBtn').click(function(){//取消操作
	var mucharea = $('#mucharea').val();
    $('.popUP').hide();
    $('.pupCont').empty();
    if(index == 1){
    	arrname = [];
    	arrname[0] = mucharea;
    }else{
    	for(i=0;i<num;++i){
			arrname.splice(arrname.length - 1,1)
		}
    }
	$(".PopsBg").remove();
	$('body').css({"overflow":"scroll","overflow-y":"auto"});
})

$('#sureBtn1').click(function(){  //确定操作
    insertSection();
})
function insertSection(){
	li = '';
	var flag = 1;
    var obj;
    num = 0;
    var addStr = '<span><a href="javascript:;" class="polidys">编辑</a><a href="javascript:;" class="delcel">删除</a><a href="javascript:;" class="add">添加子专区</a></span></li>';
    if(index == 1){
        obj = $('.two');
    }else if(index == 2){
        var $three = $('<ul class="three"></ul>');
        target.parent().append($three);
        obj = target.next();
    }else{
        var $four = $('<ul class="four"></ul>');
        target.parent().append($four);
        obj = target.next();
        addStr = '<span><a href="javascript:;" class="polidys">编辑</a><a href="javascript:;" class="delcel">删除</a></span></li>';
    }
    var $input = $('.pupCont').find('input');
    $input.each(function(index,item){
    	k++;
    	var str = $.trim($(this).val());
    	if(str != ""){
    		li += '<li id="list_'+k+'">' + '<em>'+str+'</em>' + addStr;
    	}
    	
        var len = arrname.length;
        var inputTxt = $(this).val();
		var inputTxtLen = inputTxt.replace(/[\u4E00-\u9FA5]/g,'aa').length;
        for(i=0;i<len;++i){
	   		if(inputTxtLen > 30){
	    		flag = 0;
	    		$(this).next().text('仅限30个字符');
	    		for(i=0;i<num;++i){
					arrname.splice(arrname.length - 1,1)
				}
	    		return false;
	    	}else{
	    		$(this).next().text('');
	    	}
	    	if(str == arrname[i] && str != ''){
	    		flag = 0;
        		$(this).next().text('专区名称不能相同');
        		for(i=0;i<num;++i){
					arrname.splice(arrname.length - 1,1)
				}
        		return false;
	    	}else{
	    		$(this).next().text('');
	    	}
        } 
		flag = 1;
		num++;
		arrname[len] = str;
    })  
    if(flag){
    	obj.append(li);
	    $('.popUP').hide();
	    $('.pupCont').empty();
		$(".PopsBg").remove();
		$('.pupCont').find('input').val('').eq(0).show().siblings().remove();
		$('body').css({"overflow":"scroll","overflow-y":"auto"});  
    }
    $('.veribig').show();
	$('#ps').show(); 
}
</script>

         追加后效果如下：

        如果想要添加三级或者四级的子专区类似步骤2，效果如下：

        3、获取页面上的数据

        如果有二级以下的专区，则获取如下：

<script type="text/javascript">
	var len = $(".two").children().length;  
	var erjiarr = [];
	var reg=/,$/gi;			//去掉逗号
	var regs=/\/$/gi;			//去掉斜线
	for(i=0;i<len;++i){
		var erjiname = '';
		erjiname += $(".two").children().eq(i).children('em').text();
		var sanji = $(".two").children().eq(i).attr('id');		
		var sanlen = $("#"+sanji).find('.three').children().length;			
		if(sanlen){
			erjiname += '-';				//二级和三级之间用中横线隔开
		}
		for(k=0;k<sanlen;++k){	
			erjiname += $("#"+sanji).find('.three').children().eq(k).children('em').text();
			var siji = $("#"+sanji).find('.three').children().eq(k).attr('id');		
			var silen = $("#"+siji).find('.four').children().length;	
			if(silen){
				erjiname += '(';				//三级和四级之间用括号隔开
			}	
			for(j=0;j<silen;++j){
				erjiname += $("#"+siji).find('.four').children().eq(j).find('em').text() + ",";			//四级之间用逗号隔开
			}
			erjiname=erjiname.replace(reg,"");	
			if(silen){
				erjiname += ')';
			}
			erjiname += '/';			//三级之间用斜线隔开
		}
		erjiname=erjiname.replace(regs,"");	
		erjiarr[i] = erjiname;
	}
</script>

 

        关于节点追加就分享到这里了，如有错误，欢迎指正！