js代码执行问题

今天我遇到一个js代码的执行问题,

上代码

$("#primary_menu .nav-menu").append("<li class=\"\">\n" +
    "                <a href=\"//category/"+data+"\">\n" +
    "                <div class=\"num-wrap\"><span>98</span></div>\n" +
    "            <div class=\"nav-name\">"+data.parentCategory.name+"</div>\n" +
    "                </a>\n" +
    "                <ul class=\"sub-nav\">")

$(data.childCategory).each(function () {
    $("#primary_menu .nav-menu").append("<li><a href=\"//www.bilibili.com/v/anime/serial/\"><span>"+this.name+"</span></a></li>")
})
$("#primary_menu .nav-menu").append("</ul></li>")

上面是父分类，下面是子分类,我发现那个遍历所有子分类并添加到nav-menu的方法会最后执行，

然后我猜测了一下，each方法是异步执行的，在之前就执行最后的添加</ul></li>方法了,导致

没出来想要的效果

在插入子分类之前就封口了 

后来我把要插入的html代码通过字符串拼接到一起，就解决了

var content="<li class=\"\">\n" +
    "                <a href=\"//category/"+data+"\">\n" +
    "                <div class=\"num-wrap\"><span>98</span></div>\n" +
    "            <div class=\"nav-name\">"+data.parentCategory.name+"</div>\n" +
    "                </a>\n" +
    "                <ul class=\"sub-nav\">";


$(data.childCategory).each(function () {
    content+="<li><a href=\"//www.bilibili.com/v/anime/serial/\"><span>"+this.name+"</span></a></li>";
})
content+="</ul></li>"
$("#primary_menu .nav-menu").append(content)