我无法在我的部分标签中获取我的 h3 标签和 p 标签？

Question

I am reading data from a javascript file and then importing them into the HTML file. The issue I am having is that I am unable to get my p tags and h3 tags in my section tag. This is what it looks like when I load it up:

The following code is what I have tried. I have used inner HTML to create the tags and I am not sure what I can do to fix this.

// create a box class section for whole thing
containerElement.innerHTML += "<section class='flight-info'> ";

// another class for top part of box 
containerElement.innerHTML += "<div class='topBox' ";
// add all the elements such as destination and code
containerElement.innerHTML += "<h3 class='destination'> " + FlightInfo[i].destination + " </h3>";
containerElement.innerHTML += "<p class='departTime'> Depart time: " + FlightInfo[i].departTime + " </p>";


// have to check for # of stops to format. if its not 0, we can add the # of stops and time, otherwise its Non-stop, time
if (FlightInfo[i].stops != 0) {
  containerElement.innerHTML += "<p class='timeStop'>" + FlightInfo[i].stops + ", " + FlightInfo[i].time + " min </p>";
} else if (FlightInfo[i].stops == 0) {
  containerElement.innerHTML += "<p class='timeStop'> Non-Stop" + ", " + FlightInfo[i].time + " min </p>";
}

// end the topBox class
containerElement.innerHTML += "</div>"

containerElement.innerHTML += "</section>"

Answer 1

It's because you keep adding everything to the container.

containerElement.innerHTML +=

You only need the code above one time (at least the way you're doing it now), and add everything in one long string.

Otherwise, add the section, then select the section and add everything to the section's innerHTML. Same idea with the div.