篇一：js中动态加载---append

之前是一行代码,不能动态加载,新的需求要动态加载,使用append

$('#Order_information').append('
　　<div class="single_product">
　　　　<div class="Cancel">
　　　　　　<a href="javascript:void(0);" onclick="continuePay('+orderno+','+useId+');">继续支付</a>
　　　　　　<a href="javascript:void(0);" onclick="cancelOrder('+orderno+','+useId+');">取消订单</a>
　　　　</div>
　　　　<ul class="Top_mation">
　　　　　　<li>订单编号: <span class="indent_number">'+data[i].baseinfor.orderno+'</span></li>
　　　　　　<li class="right">状态: <span class="mode">'+orderstate+'</span></li>
　　　　</ul>
　　　　<div class="Middle_mation" onclick="showOrderDetail('+orderno+','+useId+');">
　　　　　　<a href="javascript:void(0);"><img src="'+urlpath+'/views/quicksure/imags/car.png"></a>
　　　　　　<ul>
　　　　　　　　<li><h3>汽车保险</h3></li>
　　　　　　　　<li>车牌号: <span class="Car_number">'+data[i].vhlinfor.lcnno+'</span></li>
　　　　　　　　<li>商业险起期:<span class="begin_date">'+data[i].baseinfor.sypolicystartdate+'</span></li>
　　　　　　　　<li>交强险起期:<span class="begin_date">'+data[i].baseinfor.jqpolicystartdate+'</span></li>
　　　　　　　　<li>商业险止期:<span class="end_date">'+data[i].baseinfor.sypolicyenddate+'</span></li>
　　　　　　　　<li>交强险止期:<span class="end_date">'+data[i].baseinfor.jqpolicyenddate+'</span></li>
　　　　　　</ul>
　　　　　　<b>〉</b>
　　　　</div>
　　　　<p>金额: <span class="money">'+data[i].baseinfor.totalPremium+'</span></p>
</div>');

之后我改成了动态加载的

function addPolicyInfo(insuranceDetailsVO,orderstate){
    var orderno="'"+insuranceDetailsVO.baseinfor.orderno+"'";
    var useId="'"+insuranceDetailsVO.baseinfor.userinforid+"'";
    var order_info = $('#Order_information');
    var sp_div = $('<div class="single_product"/>');
    sp_div.append($('<ul class="Top_mation"/>').append('<li class="left">订单编号: <span class="indent_number">'+insuranceDetailsVO.baseinfor.orderno+'</span></li class="right"><li class="right">状态: <span class="mode">'+orderstate+'</span></li>'));
    var mm_div = $('<div class="Middle_mation" onclick="showOrderDetail('+orderno+','+useId+');"/>');
    mm_div.append('<a href="#"><img src="'+urlpath+'/views/quicksure/imags/'+ insuranceDetailsVO.vhlinfor.codeName+'.jpg" style="width:110px;height:98px;"/>');
    var sp_ul = $('<ul class="Car_mation"/>').append('<li class="main_search">车牌号: <span class="Car_number">'+insuranceDetailsVO.vhlinfor.lcnno+'</span>&nbsp;&nbsp;车主:<span class="user_Name">'+insuranceDetailsVO.vhlinfor.drvowner+'</span></li>');
    if(insuranceDetailsVO.baseinfor.sypolicystartdate != null){
        sp_ul.append($('<li>商业险起期:<span class="begin_date">'+insuranceDetailsVO.baseinfor.sypolicystartdate.slice(0,11)+'</span></li>'));
    }
    if(insuranceDetailsVO.baseinfor.sypolicyenddate != null){
        sp_ul.append($('<li>商业险止期:<span class="end_date">'+insuranceDetailsVO.baseinfor.sypolicyenddate.slice(0,11)+'</span></li>'));
    }
    if(insuranceDetailsVO.baseinfor.jqpolicystartdate != null){
        sp_ul.append($('<li>交强险起期:<span class="begin_date">'+insuranceDetailsVO.baseinfor.jqpolicystartdate.slice(0,11)+'</span></li>'));
    }
    if(insuranceDetailsVO.baseinfor.jqpolicyenddate != null){
        sp_ul.append($('<li>交强险止期:<span class="end_date">'+insuranceDetailsVO.baseinfor.jqpolicyenddate.slice(0,11)+'</span></li>'));
    }
    mm_div.append(sp_ul).append('<b>〉</b>');
    sp_div.append(mm_div);
    var p = $('<p/>');
    if(insuranceDetailsVO.baseinfor.orderstate==30||insuranceDetailsVO.baseinfor.orderstate==40){
        p.append('<a href="#" onclick="continuePay('+orderno+','+useId+');">继续支付</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="cancelOrder('+orderno+','+useId+');">取消订单</a>&nbsp;&nbsp;&nbsp;&nbsp;');
    }
    if(insuranceDetailsVO.baseinfor.orderstate==10||insuranceDetailsVO.baseinfor.orderstate==20){
        p.append('<a href="#" onclick="continueInsure('+orderno+','+useId+');">继续投保</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="cancelOrder('+orderno+','+useId+');">取消订单</a>&nbsp;&nbsp;&nbsp;&nbsp;');
    }
    p.append('金额: <span class="money">'+insuranceDetailsVO.baseinfor.totalPremium+'</span>');
    sp_div.append(p);
    order_info.append(sp_div);
}

这里要注意的是：append拼接是针对对象的添加