js向ul标签添加li并且li标签有修改删除按钮

Layui当中的导航条动态添加

效果：

1、html放置ul标签

<ul class="layui-nav" id="nav" layui-filter="test"></ul>/

2、js编写代码动态添加li

<script type="text/javascript">
     function playlistustree() {
        var url = "/extavs/Avs_Call/getplayList";
　　　　 //调用api获取数据
        ushttp.UsAjaxJSONV2(url, "", false, false, function (d) {
            console.error(d);
            if (d.code == 0) {
                //$("#nav").find('span.layui-nav-bar').remove();
                var da = d.results.data;
                //遍历数据动态添加li
                $.each(da, function (index, value) {
                    var name = da[index]['name'];
                    var id = da[index]['id'];
                     var $li = "<li class='layui-menu-item-divider' id='l" + id + "'><div class='li'><div class='lia'><a class='lianame' id='a" + id + "' onclick=getplayItem('" + id + "')>" + name + "</a></div><div class='aul'><a class= 'updnote' onclick =updplayList('" + id + "','" + name + "')> <i class='us-icon'  style='color:#1e9fff'>&#xe68f;</i></a ><a class='deltnote' onclick=delplayList('" + id + "','" + name + "')><i class='us-icon' style='color:rgb(245, 108, 108)'>&#xe6a5;</i></a></div></div></li>";
                    $("#nav").append($li);
                })
                //列表添加完后再次执行渲染
                xuanran();
            }
            else {
                usbasic.errorMsg(d.msg);
            }
        });
    }
</script>

 function xuanran() {
        layui.use('element', function () {
            var element = layui.element;
            var layFilter = $("#nav").attr('lay-filter');
            element.render('nav', layFilter);
        })
    }

3、css样式

<style>
    //ul盒子样式
    .layui-nav {
        position: relative;
        padding: 0px 0px 0px 0px;
        margin-top: 10px;
        height: 250px;
        /* background-color: #393D49; */
        color: #fff;
        border-radius: 2px;
        font-size: 0;
        box-sizing: border-box;
    }
        //修改删除按钮右侧浮动
        .layui-nav .aul {
            float: right;
        }
       //列表名左侧浮动
        .layui-nav .lia {
            width: 60%;
            float: left;
        }

        .layui-nav .aul .updnote {
            margin-right: 10px;
        }

        .layui-nav .layui-menu-item-divider {
            margin: 10px 0px 0px 10px;
            height: 20px;
        }
    //添加滚动条
    .ldiv3 .playlistusul {
        height: 250px;
        /*overflow-y: overlay;*/
        /*overflow-y: hidden;*/
        overflow: auto;
    }
</style>

4、点击对应列表名、名变色

(li的onclick点击事件中对标签名设置样式 ，根据id获取点击li设置为蓝色，提前通过类获取标签将全部li设置为黑色)

  $(".lianame").css("color", "black");
        $("#a" + id).css("color", "#1e9fff");

变色效果：