JS动态添加元素实例

从后台加载数据，结构为目录树二级菜单。

数据格式为：

html:<ul class="sidebar-menu" id="proMenu" style="background:#88A0CE;"></il>

JS：

var width = window.screen.availWidth * 0.9 - 15; //区域宽度

var n = parseInt(width / 130); //每行容纳图标数量
var margin = parseInt((width - 130 * n - 30) / (n + 1)) + 30; //动态计算间距

            $.ajax({
                type: 'post',
                url: '/Index/getProTree',
                dataType: 'json',
                success: function (data) {
                    var text = "";
                    var num;

for (var i = 0; i < data[0].children.length; i++) { //遍历一级菜单
num = data[0].children[i].children.length;
 text += "<li class=\"nav-item\"><a href=\"javascript:;\">" + data[0].children[i].text + "共"+num+"项</a><ul class=\"projectlist\"> ";
 for (var j = 0; j < num; j++) { //遍历二级菜单
 text += "<li><a><img src=\"../images/station5.png\"/>" + data[0].children[i].children[j].text + "" + data[0].children[i].children[j].id + "</a></li>";
 }
 text += "</ul></li>";
 }
 document.getElementById("proMenu").innerHTML = text; //将要添加的内容全赋给变量text，再将它整体赋值给ul

                    //设置 li 间距   注：JS的加载顺序。Ajax是异步加载，必须等Ajax加载完毕才能对动态添加的元素设置样式，否则获取不到元素。所以注意该设置方法放置的位置
                    $(".projectlist li").css("margin-top", margin + "px");
                    $(".projectlist li").css("margin-left", margin + "px");
                    $(".projectlist").css("padding-bottom", margin + "px");

                    $(".nav-item>ul:first").slideDown();//设置第一个站点展开
                    $(".nav-item:first-child").addClass('selected'); //为展开站点着色
                }
            });

效果：

JS捕获动态生成的元素：

$("上级元素").on("click", "目标元素", function() {});

如：

$("#proMenu").on("click", ".nav-item>a", function () {

//操作

}）

JS动态添加元素实例

猜你喜欢