Layui动态生成导航菜单子菜单不显示解决方法

 今天在使用Layui导航条动态添加的时候，发现动态添加后没有办法再次渲染他的效果，原因未知，但是已经解决了，j经常存在的问题我进行总结，直接贴图看结果

1.正确导入layui.all.js

<script src="../static/layui/layui.all.js"></script>

2.依赖 element 模块

<ul class="layui-nav layui-nav-tree"  lay-filter="test">
    <li class="layui-nav-item layui-nav-itemed">
        <a class="" href="javascript:;">菜单</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">二级菜单1</a></dd>
            <dd><a href="javascript:;">二级菜单2</a></dd>
            <dd><a href="javascript:;">二级菜单3</a></dd>
        </dl>
     </li>
</ul>

<script>
  //注意：导航 依赖 element 模块，在生成动态菜单后添加，否则无法进行功能性操作
  layui.use('element', function(){
    var element = layui.element;
  });
</script>

3.动态渲染的span.layui-nav-bar样式位置不对，动态渲染前先删除，渲染完成后再进行加载

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

//在动态加载前删除span.layui-nav-bar
$("#nav").find('span.layui-nav-bar').remove();
$("#nav").append()
for(var o = 0;o<menuList.length;o++){
    var menu = menuList[o];
    var html = '<li class="layui-nav-item layui-col-md1">'+
            '<a class="layui-side-cai"  href="javascript:;">'+menu['name']+'</a>'+
            '<dl class="layui-nav-child biaoji child-left">';
    html += '<ul  class="layui-nav layui-nav-tree">';
    html += '<li class="layui-row">' +
            '<span class="yijia layui-col-md3"  title="'+chirds['name']+'">' +
            '<span class="yijispan">'+
            (typeof menuIcon[chirds.id] == "undefined"?chirds['name']+'</span>':'<img class="caidanimg" src="'+menuIcon[chirds.id]+'"/>'+chirds['name']+'</span>')+
            '    </span>' ;
    html +'</li>';
    html += '</ul>'
    html += '</dl>';
    html += '</li>';       
    $("#nav").append(html)
}
xuanran(); //DOM渲染完成后重新绘制
function xuanran() {
    layui.use('element', function () {
          var element = layui.element;
          var layFilter = $("#nav").attr('lay-filter');
          element.render('nav', layFilter);
    })
}