js动态加载控件

最近做项目遇到了动态加载控件，最开始想找一些人家做好的控件自己直接用，后来没有找到完全符合自己的，于是就动手敲了一个小Demo

function show() {
    $.ajax({
        type: "post",
        url: "/Label/ShowLabel",
        dataType: "json",
        success: function (data) {
            if (data.length == 0) {
                $("h4").css('display', 'block').html("没有标签呢，可以在这里添加标签！");
                $("h4").fadeOut(3000);
                return;
            }
            else {
                for (var i = 0; i < data.length; i++) {
                    var div1 = document.createElement("div");
                    div1.className = "panel panel-info";
                    var div = document.createElement("div");
                    div.className = "panel-heading";
                    var input = document.createElement("input");
                    input.id = data[i].label_name;
                    input.className = "labelinput";       //不能用class
                    input.value = data[i].label_name;
                    input.type = "text";
                    input.disabled = true;
                    var span = document.createElement("span");
                    span.className = "opt-box";
                    var aedit = document.createElement("a");
                    aedit.className = "btn-edit";
                    aedit.text = "编辑";
                    var adelete = document.createElement("a");
                    adelete.className = "btn-delete";
                    adelete.text = "删除";
                    span.appendChild(aedit);
                    span.appendChild(adelete);
                    div.appendChild(input);
                    div.appendChild(span);
                    div1.appendChild(div);
                    $("#one").append(div1);
                }
                $(".btn-edit").bind('click', editLabel);       //绑定事件，在窗体加载的时候绑定不能生效
                $(".btn-delete").bind('click', deleteLabel);
            }
        },
        error: function (data) {
            alert("系统出错了，请联系管理员！");
        }
    })
}

其实还可以这样设置属性：setAttribute()

 var div_list = document.createElement("div");
 div_list.setAttribute("class", "panel panel-info");
 div_list.id = "lable_list";

这次自己收获了很多的东西，学会利用ajax如何局部刷新，也知道了怎样动态的添加控件。

其实这些都是jQuery的一些基本知识，可以点开链接学习一下：JQuery添加元素