Could someone explain this function to me. Populating weather app:

[CodeLooper]

let displayWeatherDay = function(dayOfWeek, description, icon,  highTemp, lowTemp, ) {
  let out = "<div class='weatherDay'><img src='http://openweathermap.org/img/wn/" + icon + ".png'/>";
  out += "<h3>" + dayOfWeek + "</h3>";
  out += "<h4>" + description + "</h4>";
  out += "<h5><span id = 'span1' >High:</span> " + highTemp + "c</h5>";
  out += "<h6><span class = 'span2'>Low:</span> " + lowTemp + "c</h6>";
 
 document.getElementById("forecast").innerHTML += out;  
  document.getElementById("forecast").style.fontSize = "20px";
}

I understand most of it. I just don’t get the += part of the whole story.
For some context this is a function that is part of an 8 day weather forecast app.
This function basically is connected to an array that loops through 8days and returns value.
Then this function is called and those values are passed into it. Which then go on to display an 8 day weather forecast.
I have not seen an example of += when populating multiple items using an array before so that’s whats tripping me up. An explanation would be appreciated.

[DanCouper]

It’s just string concatenation, joining them together

var sentence = "This ";
sentence += "is ";
sentence += "a ";
sentence += "sentence.";

console.log(sentence)
// "This is a sentence."

It’s just been put on seperate lines to make it [arguably] easier to read. JS has string templating, so could (and probably should) be written:

let out = `
<div class="weatherDay">
  <img src="http://openweathermap.org/img/wn/${icon}.png" />
  <h3>${dayOfWeek}</h3>
  <h4>${description}</h4>
  <h5><span id="span1">High:</span>${highTemp}c</h5>
  <h6><span class="span2">Low:</span> ${lowTemp}c</h6>
</div>
`;

[CodeLooper]

Thanks bud. Very simple.