Problème de formatage des objets JS en html

Question

J'ai une fonction qui rend un objet en html.

.item {
  padding: 10px;
  margin: 20px;
  display: inline-block;
  position: relative;
  border: 1px solid #666;
  background: #ddd;
}

.item h4 {
  font-size: 18px;
  text-align: center;
}

.item h5 {
  font-size: 14px;
  text-align: center;
}

.item img {
  width: 200px;
  height: 200px;
}

Il me semble qu'il y a un problème de formatage. Le JS se compile correctement, sans erreur, mais les balises h4 et h5 sont rendues à l'extérieur du , même si, dans le code, la balise div de fermeture se trouve après les balises h4 et h5. Voici le code HTML après son affichage dans le navigateur

<div class="menuHolder" id="menuContainer">

for (var i = 0; i < foodItems.length; i++) {
  document.getElementById("menuContainer").innerHTML += '<div class="item"> <img src="' +  foodItems[i].image + '" >';
  document.getElementById("menuContainer").innerHTML += '<h4> ' +  foodItems[i].name + '</h4>';
  document.getElementById("menuContainer").innerHTML += '<h5> $' +  foodItems[i].price + '</h5>';
  document.getElementById("menuContainer").innerHTML += '</div>';
  console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}

.item {
  padding: 10px;
  margin: 20px;
  display: inline-block;
  position: relative;
  border: 1px solid #666;
  background: #ddd;
}

.item h4 {
  font-size: 18px;
  text-align: center;
}

.item h5 {
  font-size: 14px;
  text-align: center;
}

.item img {
  width: 200px;
  height: 200px;
}

<div class="menuHolder" id="menuContainer">
  <div class="item">
    <img src="images/hamburger.jpg"></div>
  <h4>Hamburger</h4>
  <h5>$2.99</h5><div class="item">
  <img src="images/fries.jpg"></div>
  <h4>Fries</h4>
  <h5>$1.99</h5>
  <div class="item"> 
    <img src="images/donuts.jpg">
  </div>
  <h4>Donuts</h4>
  <h5>$0.99</h5>
</div>

Answer 1

Essayez ça :

for (var i = 0; i < foodItems.length; i++) {
    var tmpstr = '<div class="item"> <img src="' +  foodItems[i].image + '" >';
    tmpstr += '<h4> ' +  foodItems[i].name + '</h4>';
    tmpstr += '<h5> $' +  foodItems[i].price + '</h5>';
    tmpstr += '</div>';
    document.getElementById("menuContainer").innerHTML = tmpstr;
    console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}

Lorsque vous avez ajouté une chaîne à innerHTML, les navigateurs peuvent "corriger automatiquement" le html et l'ajouter à la fin.

P.S. Vous devrez peut-être faire attention aux caractères d'échappement dans votre foodItems[i].name.