Question

基本上我想在HTML组件上呈现动态数据。这是我的HTML：

<div id="colorGradiant"></div>

获取数据并将内容附加到html组件的脚本：

 function showColorLegendBox(max)
    {
        var content = "<div id='colorGradiant' style='border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; left:0px; top: 10px; bottom: 10px; right: 10px; font-family: Helvetica; width: 256px; z-index: 10000000000; background-color: rgb(255, 255, 255); padding: 10px; border: 1px solid black; margin: 0px; background-position: initial initial; background-repeat: initial initial;'><h3 style='padding:0;margin:0;text-align:center;font-size:16px;'>Cases Severity</h3><ul style='position: relative; font-size: 12px; display: block; list-style: none; margin: 0px; height: 15px;'><li style='position:absolute;left:0.5px'>0</li><li style='position:absolute;left:42.5px'>" + Math.round(max/5*1) +"</li><li style='position:absolute;left:93.5px'>" + Math.round(max/5*2) + "</li><li style='position:absolute;left:144.5px'>" + Math.round(max/5*3) + "</li><li style='position:absolute;left:195.5px'>" + Math.round(max/5*4) + "</li><li style='position:absolute;left:238.5px'>" + max + "</li></ul><div style='position: relative; display: block; width: 256px; height: 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAPCAYAAAALUxEHAAABbklEQVRoQ+2Y2wrCMBBEU6/4Ivj//+mDPuiuNlBLRdtu08kwwqCNue5MDmiTUnqYGhPDS2fBdFG+gPriF1/mgJojMEMaQ3VfBADIjL02RRU0wQwyaA8BANIXAQDXFi4wZwAA11tbUwVUgaUqkAFwsAX2KV1MJ9PNdDZtWh3t/WDam3Ymf/bv+m3bto/3c/n33j8/d9u6Y/PnoX7dtu68vtbAOGv1k1Ao3e0gJeUxW249Flv8HAuWqdjczfX977//1hQAENMJkbK4tCOWeOqeIKyZyWoBYKr7pcbBpmwaFEqVrcQ6sNaMgIIAUCIpc9aoKmW/oTCnFGhjq7LmCxQEALRU9fdTfco+oYBe7jH7q94ag4IAMMbxNfoypKw9Qy6fI2GNUkavyWCNABCdiuj5GFLWA8BQiWqEAoM1AkD0hY2ejyFlfwCgRigwWCMARF/Y6PkYUjYRAOhQYLBGAIi+sNHzMaQsEABIUGCwxgHwBKAUMz0MMUkzAAAAAElFTkSuQmCC);'></div></div>";
        var html = document.getElementById("colorGradiant");
        html.appendChild(content);
}

然而，通过使用这些代码，它会给我一个错误消息，即Uncaught NotFoundError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：新的子元素为空。我想知道有没有办法解决这个问题？

提前致谢。

修改

function showColorLegendBox(max)
{
    $('opacitydiv').empty();
    var content = "<h3 style='padding:0;margin:0;text-align:center;font-size:16px;'>Cases Severity</h3><ul style='position: relative; font-size: 12px; display: block; list-style: none; margin: 0px; height: 15px;'><li style='position:absolute;left:0.5px'>0</li><li style='position:absolute;left:42.5px'>" + Math.round(max/5*1) +"</li><li style='position:absolute;left:93.5px'>" + Math.round(max/5*2) + "</li><li style='position:absolute;left:144.5px'>" + Math.round(max/5*3) + "</li><li style='position:absolute;left:195.5px'>" + Math.round(max/5*4) + "</li><li style='position:absolute;left:238.5px'>" + max + "</li></ul><div style='position: relative; display: block; width: 256px; height: 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAPCAYAAAALUxEHAAABbklEQVRoQ+2Y2wrCMBBEU6/4Ivj//+mDPuiuNlBLRdtu08kwwqCNue5MDmiTUnqYGhPDS2fBdFG+gPriF1/mgJojMEMaQ3VfBADIjL02RRU0wQwyaA8BANIXAQDXFi4wZwAA11tbUwVUgaUqkAFwsAX2KV1MJ9PNdDZtWh3t/WDam3Ymf/bv+m3bto/3c/n33j8/d9u6Y/PnoX7dtu68vtbAOGv1k1Ao3e0gJeUxW249Flv8HAuWqdjczfX977//1hQAENMJkbK4tCOWeOqeIKyZyWoBYKr7pcbBpmwaFEqVrcQ6sNaMgIIAUCIpc9aoKmW/oTCnFGhjq7LmCxQEALRU9fdTfco+oYBe7jH7q94ag4IAMMbxNfoypKw9Qy6fI2GNUkavyWCNABCdiuj5GFLWA8BQiWqEAoM1AkD0hY2ejyFlfwCgRigwWCMARF/Y6PkYUjYRAOhQYLBGAIi+sNHzMaQsEABIUGCwxgHwBKAUMz0MMUkzAAAAAElFTkSuQmCC);'></div>";
    $("#opacitydiv").append(content);

    //Hide the other elements of opacitydiv
    document.getElementById('opacitytext').style.display = "none";
    document.getElementById('opacityselect').style.display = "none";
    document.getElementById('opacityslider').style.display = "none";

    //Adjust the css for opacitydiv
    document.getElementById('opacitydiv').style.display = "block";
    document.getElementById("opacitydiv").style.width="25%";
}

function queryMHC()
{           
        if (heatmap_MHC) {
            heatmap_MHC.setMap(null);
        }   
        var visitAPI = "http://mhclivemap.appsolutrends.net/api/visits?" +
                "start=" + $('#startDate').val() + "&end=" + $('#endDate').val() + 
                "&diagnosis=" + $('#mhc_type_select').val();

           $.ajax({      
                url: "/main/Redirect.aspx?url=" + encodeURIComponent(visitAPI),
                dataType: "json",
                crossDomain:true,
                success: function (res) {                   
                   var gradient = [
                                    'rgba(185, 185, 203, 0)',
                                    'rgba(145, 145, 192, 0)',
                                    'rgba(65, 65, 207, 0)',
                                    //dark blue
                                    'rgba(30, 30, 229, 1)',
                                    //light blue
                                    'rgba(0, 185, 255, 1)',
                                    'rgba(0, 255, 215, 1)',                                     
                                    //green
                                    'rgba(0, 255, 15, 1)',
                                    'rgba(0, 255, 0, 1)',
                                    //yellow
                                    'rgba(255, 255, 0, 1)',
                                    'rgba(255, 235, 0, 1)',
                                    //red
                                    'rgba(255, 0, 0, 1)'
                                  ]

                    var result = res.visits;
                    var data = [];
                    var max = 0;

                    for (var i=0; i < result.length; i++) { // iterate thru each element in array
                        var count = result[i].count;
                        data.push({
                            location: new google.maps.LatLng(result[i].lat, result[i].lon),
                            weight: count
                        });

                        if (count > max) {
                            max = count;
                        }
                    }

                    heatmap_MHC = new google.maps.visualization.HeatmapLayer({
                      data: data,
                      radius: 30,
                      opacity: 0.8,
                      maxIntensity: max
                    });
                    heatmap_MHC.set('gradient', gradient);
                    heatmap_MHC.setMap(map);

                    showColorLegendBox(max);
                },
                error: function () {
                    alert('unable to load this layer, please try again later');
                }
            });

}

Answer 1

使用 append()

 var content = "<div id='colorGradiant' style='border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; left:0px; top: 10px; bottom: 10px; right: 10px; font-family: Helvetica; width: 256px; z-index: 10000000000; background-color: rgb(255, 255, 255); padding: 10px; border: 1px solid black; margin: 0px; background-position: initial initial; background-repeat: initial initial;'><h3 style='padding:0;margin:0;text-align:center;font-size:16px;'>Cases Severity</h3><ul style='position: relative; font-size: 12px; display: block; list-style: none; margin: 0px; height: 15px;'><li style='position:absolute;left:0.5px'>0</li><li style='position:absolute;left:42.5px'>" + Math.round(max/5*1) +"</li><li style='position:absolute;left:93.5px'>" + Math.round(max/5*2) + "</li><li style='position:absolute;left:144.5px'>" + Math.round(max/5*3) + "</li><li style='position:absolute;left:195.5px'>" + Math.round(max/5*4) + "</li><li style='position:absolute;left:238.5px'>" + max + "</li></ul><div style='position: relative; display: block; width: 256px; height: 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAPCAYAAAALUxEHAAABbklEQVRoQ+2Y2wrCMBBEU6/4Ivj//+mDPuiuNlBLRdtu08kwwqCNue5MDmiTUnqYGhPDS2fBdFG+gPriF1/mgJojMEMaQ3VfBADIjL02RRU0wQwyaA8BANIXAQDXFi4wZwAA11tbUwVUgaUqkAFwsAX2KV1MJ9PNdDZtWh3t/WDam3Ymf/bv+m3bto/3c/n33j8/d9u6Y/PnoX7dtu68vtbAOGv1k1Ao3e0gJeUxW249Flv8HAuWqdjczfX977//1hQAENMJkbK4tCOWeOqeIKyZyWoBYKr7pcbBpmwaFEqVrcQ6sNaMgIIAUCIpc9aoKmW/oTCnFGhjq7LmCxQEALRU9fdTfco+oYBe7jH7q94ag4IAMMbxNfoypKw9Qy6fI2GNUkavyWCNABCdiuj5GFLWA8BQiWqEAoM1AkD0hY2ejyFlfwCgRigwWCMARF/Y6PkYUjYRAOhQYLBGAIi+sNHzMaQsEABIUGCwxgHwBKAUMz0MMUkzAAAAAElFTkSuQmCC);'></div></div>";
    $("#colorGradiant").append(content);

如果你想使用javaScript更新然后使用innerHTML感谢@NoGray提出建议:)

html.innerHTML = content;

Answer 2

使用一点点jquery并按以下方式执行

function showColorLegendBox(max)
{
    var content = "<div>div content....</div>";
    var html = $("#colorGradiant").html(content);
}

Answer 3

 function showColorLegendBox(max) {
        var content = "<div id='colorGradiant' style='border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; left:0px; top: 10px; bottom: 10px; right: 10px; font-family: Helvetica; width: 256px; z-index: 10000000000; background-color: rgb(255, 255, 255); padding: 10px; border: 1px solid black; margin: 0px; background-position: initial initial; background-repeat: initial initial;'><h3 style='padding:0;margin:0;text-align:center;font-size:16px;'>Cases Severity</h3><ul style='position: relative; font-size: 12px; display: block; list-style: none; margin: 0px; height: 15px;'><li style='position:absolute;left:0.5px'>0</li><li style='position:absolute;left:42.5px'>" + Math.round(max / 5 * 1) + "</li><li style='position:absolute;left:93.5px'>" + Math.round(max / 5 * 2) + "</li><li style='position:absolute;left:144.5px'>" + Math.round(max / 5 * 3) + "</li><li style='position:absolute;left:195.5px'>" + Math.round(max / 5 * 4) + "</li><li style='position:absolute;left:238.5px'>" + max + "</li></ul><div style='position: relative; display: block; width: 256px; height: 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAPCAYAAAALUxEHAAABbklEQVRoQ+2Y2wrCMBBEU6/4Ivj//+mDPuiuNlBLRdtu08kwwqCNue5MDmiTUnqYGhPDS2fBdFG+gPriF1/mgJojMEMaQ3VfBADIjL02RRU0wQwyaA8BANIXAQDXFi4wZwAA11tbUwVUgaUqkAFwsAX2KV1MJ9PNdDZtWh3t/WDam3Ymf/bv+m3bto/3c/n33j8/d9u6Y/PnoX7dtu68vtbAOGv1k1Ao3e0gJeUxW249Flv8HAuWqdjczfX977//1hQAENMJkbK4tCOWeOqeIKyZyWoBYKr7pcbBpmwaFEqVrcQ6sNaMgIIAUCIpc9aoKmW/oTCnFGhjq7LmCxQEALRU9fdTfco+oYBe7jH7q94ag4IAMMbxNfoypKw9Qy6fI2GNUkavyWCNABCdiuj5GFLWA8BQiWqEAoM1AkD0hY2ejyFlfwCgRigwWCMARF/Y6PkYUjYRAOhQYLBGAIi+sNHzMaQsEABIUGCwxgHwBKAUMz0MMUkzAAAAAElFTkSuQmCC);'></div></div>";
        $('#colorGradiant').append(content);        
    }

Answer 4

如果你想继续使用DOM，你可以试试：

html.lastChild.insertAdjacentHTML('afterend', content);

这将保留html节点中的现有内容，而不是覆盖它（与html.innerHTML = content;一样）。

HTML DOM appendChild

4 个答案: