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>

 

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