Dynamic div displaying incorrectly

I have a dynamic legend being added into a leaflet map.

My issue is where the div.innerHTML +='' gets called before the if statements and for statement have finished.

Ive been looking into Callbacks but im just really stuck after hours of looking at this, and seem to be going in circles

    /*Legend Control */
            function maplegendControl(){
               dynamicmapLegend = L.control({position:'topright'});
                dynamicmapLegend.onAdd = function (map) {
                        var div = L.DomUtil.create('div', 'legend'),
                        legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],
                    legendlabels = ["Blue", "Red", "Green"];

                    div.innerHTML +='<div class="legend-inner-top">'
                                  + '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">Legend</strong></div>'
                                  + '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closeLegend"></button></div>'
                                  + '</div>'
                                  + '<div class="legend-inner-bottom">'

                                  if (map.hasLayer(jungle)){
                                                                // loop through our density intervals and generate a label with a colored square for each interval
                                                                                for (var i = 0; i < legendcolors.length; i++) {
                                                                                        div.innerHTML +=
                                                                                        '<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>'  + legendlabels[i]  + "</div>";
                                                                                }
                                                            }

                                                            if (map.hasLayer(tropical)){
                                                                div.innerHTML +='<i><img src="assets/img/legend-tropical.png" alt="Tropical Icon" height="18" width="18"></i>' + 'Tropical' + "<div style='margin-top: 10px;'></div>";
                                                            }

                                                            if (map.hasLayer(forest)){
                                                                div.innerHTML +='<i><img src="assets/img/legend-forest.png" alt="Forest Icon" height="18" width="18"></i>' + 'Forest' + "<div style='margin-top: 10px;'></div>";
                                                            }
                                  

                                  div.innerHTML +='</div>'
                                  return div;           
                                        }                    

                dynamicmapLegend.addTo(map);
           }