CODEWITHSUNDEEP
javascriptjqueryhtmldom
user2424370
user2424370

Reputation:

HTML DOM appendChild

Basically I wanted to present dynamic data on HTML components. Here is my html:

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

And the script to get data and append the content to the html component:

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

However, by using these codes, it throw me an error message which is Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null. I wonder is there any way to fix this?

Thanks in advance.

EDIT

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

}

Upvotes: 0

Views: 716

Answers (4)

David Thomas
David Thomas

Reputation: 253308

You could try, if you wanted to continue using the DOM:

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

This will preserve existing content within the html node, rather than overwriting it (as would happen with html.innerHTML = content;).

Upvotes: 0

D Mishra
D Mishra

Reputation: 1578

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

Upvotes: 0

Ankush Jain
Ankush Jain

Reputation: 6974

use little bit jquery and do it as following

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

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

use 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);

update if you want with javaScript then use innerHTML thanks @NoGray for suggestion :) 

html.innerHTML = content;

Upvotes: 1

Related Questions