jQuery 多级插入元素

最新推荐文章于 2023-11-22 09:57:39 发布

nanning_zhang

最新推荐文章于 2023-11-22 09:57:39 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhang1027963459/article/details/50524885

本文介绍了一种使用JavaScript动态生成HTML侧边栏菜单的方法。通过遍历数据结构，逐层构建DOM元素并插入到指定位置，实现了菜单项及其子菜单的动态展示。此方法适用于需要根据后台数据实时更新菜单的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插入前的 html

<ul class="modules list-unstyled">
    <li class="item active" id="left-navigation">
        <!-- 侧边导航栏 插入html动态变化-->
    </li>
</ul>

下面是要插入的数据

var navigation = [{
    text: "安全中心",
    child: [{text: "系统安全预警", url: ""}, {text: "子账号权限", url: ""}]
}, {
    text: "黑名单管理",
    child: [{text: "旺旺黑名单", url: ""}, {text: "手机号黑名单", url: ""}]
}, {
    text: "短信充值",
    child: [{text: "短信充值", url: ""}]
}];

插入元素代码

for (var num = 1; num <= navigation.length; num++) {
    var attrs = navigation[num - 1].text;
    var childs = navigation[num - 1].child;

    var $l_num = $("<h5 ng-click='switchMainModule($event)'></h5>").text(attrs);  //第一层
    var $u_num = $("<ul class='sub-modules list-unstyled'></ul>");		//第一层
    $("#left-navigation").append($l_num, $u_num);  //插入

    for (var n = 1; n <= childs.length; n++) {
        var $L_n = $("<li class='sub-module-item' data-module='discountList'></li>");
        var $a_n = $("<a></a>").text(childs[n - 1].text).attr("href", childs[n - 1].url);
        $u_num.append($L_n); //插入第二层
        $L_n.append($a_n);   //插入第三城 
    }
}