html dom appendchild,javascript - HTML DOM appendChild - Stack Overflow

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

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

function showColorLegendBox(max)

{

var content = "

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 = "

Cases Severity

• 0
• " + Math.round(max/5*1) +"
• " + Math.round(max/5*2) + "
• " + Math.round(max/5*3) + "
• " + Math.round(max/5*4) + "
• " + max + "

$("#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');

}

});

}