The DOM is not rendering what it should

I have this JS:

function climat(code, isday, hour){
    weather = {'113': (isday == "yes" && hour < 4) ? '<i class="sunn"></i>' : '<i class="moonn"></i>'   }
    return weather[code]
};

function Meteo(d) {
    for (h = 1; h < 4; h++) {
        alert(climat(meteo[d].hourly[h].weatherCode, meteo[d].hourly[h].isdaytime, h));
        $("#meteo"+h).html(climat(meteo[d].hourly[h].weatherCode, meteo[d].hourly[h].isdaytime), h)
    }
};

Now, I dont get what it should, I used for this the alert() and the tenary is ok, so what happens?

Here is test from the console:

 meteo = JSON.parse(localStorage.getItem('meteo')).data.weather
 [Object, Object, Object, Object, Object]
 climat(meteo[3].hourly[2].weatherCode, meteo[3].hourly[2].isdaytime, 5)
 "<i class="moonn"></i>"
 climat(meteo[3].hourly[2].weatherCode, meteo[3].hourly[2].isdaytime, 4)
 "<i class="moonn"></i>"
 climat(meteo[3].hourly[2].weatherCode, meteo[3].hourly[2].isdaytime, 3)
 "<i class="sunn"></i>"

Here is a screenshot, the class called is sunn, but it renders moonn: