页面动态添加数据的方法

方法一：

var div1 = document.getElementById("yxb_all");
            df = document.createDocumentFragment();
            for(var i=0;i<4;i++){

                //清除div中的内容
                div1.innerHTML="";
                var oDiv = document.createElement("div");

                //排名
                var rank=i+1;

                //设置样式
                oDiv.style.border="#FED009 solid 2px";
                oDiv.style.margin="0 30px 30px 30px";
                oDiv.style.borderRadius="6px";
                var code = "<table style='width: 100%' cellpadding='0' cellspacing='10'>";
                code += "<tr><th colspan='3' align='center'>总排名："+rank+"</th></tr>";
                code += "<tr><td rowspan='3' align='center' width='30%'><img src='image/images.jpg' style='height: 70px;width: 70px;border-radius:30%;'></td><td width='35%'>(1)流水</td><td width='35%'>"+myrank[i].amount_income+"</td></tr>";
                code += "<tr><td>(2)红包</td><td>"+0+"个</td></tr>";
                code += "<tr><td>(3)红包</td><td>"+myrank[i].createtime_income+"个</td></tr>";
                oDiv.innerHTML = code+"</table>";
                df.appendChild(oDiv);
            }
            div1.appendChild(df);

 

 

方法二：

var myIncome = JSON.parse(request.responseText);
                for(var i=0;i<myIncome.length;i++){
                
                    var myMmb =document.getElementById("mmb_table");
                    for(var j=myMmb.rows.length-1;j>0;j--){
                        myMmb.deleteRow(j);
                    }
                    var otr = document.createElement("tr");
                    otr.innerHTML = "<th colspan='3' style='color: #f13e53;font-family: '黑体';font-size: 80px;' >排名："+myIncome[i].my_gift+"</th>";
                    myMmb.appendChild(otr);
                    var otr1 = document.createElement("tr");
                    otr1.innerHTML = "<td rowspan='3' align='center' width='30%'><img src='image/images.jpg' style='height: 70px;width: 70px;border-radius:30%;'></td><td>（1）流水</td><td>"+myIncome[i].my_balance+"元</td>";
                    myMmb.appendChild(otr1);
                    var otr2 = document.createElement("tr");
                    otr2.innerHTML = "<td>（2）红包</td><td>0个</td>";
                    myMmb.appendChild(otr2);
                    var otr3 = document.createElement("tr");
                    otr3.innerHTML = "<td>（3）红包</td><td>"+myIncome[i].my_gift+"个</td>";
                    myMmb.appendChild(otr3);
                }

转载于:https://my.oschina.net/u/3229176/blog/898486