JS通过DOM更新页面元素

案例1：

按照年度获取项目的列表信息后通过DOM更新列表中的信息

var RefreashYearList = function () {

        var btn_this = $("#btn_XMXXUpdate");
        btn_this.attr("disabled", true); //.attr("disabled","disabled");
        btn_this.css("background-color", "gray");//更改css的属性
        //$("#xmxx_info").html("");
        $("#xmxx_info").css("background-color", "#f3fce8");

        $.ajax({
            type: "POST", //Post传参
            url: XMXX_Server_URL+"/GetXMYearList?jsoncallback?",//服务地址
            dataType: "jsonp",
            //contentType: "application/json;charset=utf-8",
            jsonp: 'jsoncallback',
　　　　　　  //此参数的类型应和Webservice的类型参数名一致，如 {username: "blue", password: "123546"}, WEBSERVICE void GetXMYearList(string username, string password){ ... }
            data: {}, 
            success: function (result) {


                var html = "";
                var x;
                var temp, tempYearItem;
                for (var i = 0; i < result.length; i++) {

                    tempYearItem = result[i];
                    html = html + '<li class=\'list-group-item\'><span class="bager_project_mum">' + tempYearItem.totall + '</span>' +
                                tempYearItem.year + '年项目<ul class ="project-info-ul">';

                    for (var j = 0; j < tempYearItem.Data.length; j++) {
                        temp = tempYearItem.Data[j];
                        html = html + '<li id = "' + temp.BSM + '" class="project_item_lst">' + temp.Name + '</li>';
                    }

                    html = html + '</ul></li>'
                }

                // 调用成功后，将获取的名字填入name文本框中。
                var $xm_index = $(".list-group.project-year-ul");
                $xm_index.find("li").remove();
                $xm_index.html(html);
                $(".project_item_lst").bind('click', GetTargetXMXX);


                // 界面状态更新
                BindYearItemEventClick(); //绑定事件
                btn_this.attr("disabled", false); //.removeAttr("disabled"); .attr("disabled","")
                btn_this.css("background-color", "green");//更改css的属性
            },
            error: function (e) {
                window.alert("获取项目年份与信息列表失败!\n原因为:" + e.status +"\n请检查到服务器的网络是否正常.");
            }
        });
    }

 

DOM增加或减少列表中内容的项目数（参考代码段2）

    //DOM增加或减少菜单(已废弃)
    $(".btn_wrap").click(function (event) {


        var $ul_cur_did = $(".list-group-item:last ul");
        var target = event.target, index = $ul_cur_did.find("li").length, html = "";
        if (target.id == 'btn_longer') {

            for (var i = 0; i < 5; i++) {
                html = html + '<li class="project_item_lst">测绘项目 item' + (index + i + 1) + '</li>';
            }
            $ul_cur_did.append(html);
        }
        else if (target.id = 'btn_shortter') {
            if (index > 5) {
                $(".list-group-item:last ul li:gt(" + (index - 6) + ")").remove();
            }
        }

        //更新数值，设置一个更新动画
        $(".list-group-item:last span").text($ul_cur_did.find("li").length);
        //bager_project_mum_update
        $(".list-group-item:last span").animate({ right: "10px" }, 1000)
            .animate({ left: "10px" }, 1000, function () {
                // 动画回调
                // $(this).css("bager_project_mum");
            });

        // 更新范围
        if ($ul_cur_did.css("visibility") == "visible") {
            $ul_cur_did.css("height", 2.5 * $ul_cur_did.find("li").length + "em");
        }



    });