HTML DOM appendChild

基本上我想在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:未能在"Node"上执行"appendChild"：新的子元素为null。我想知道有没有办法解决这个问题？

提前谢谢。

编辑

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');
                }
            });           

}