htmlでのJSオブジェクトの書式設定

Question

私は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; 
} 

フォーマットの問題がありません。 JSは正しくコンパイルされますが、エラーはありませんが、h4タグとh5タグの両方がコードの外側にレンダリングされますが、閉じたdivタグはh4タグとh5タグの後にあります。それは、ブラウザでレンダリングされる後 は、ここでHTMLをIDS

<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

このお試しください：

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); 
} 

あなたがinnerHTMLプロパティに文字列を追加すると、ブラウザのかもしれない「自動正しいを"htmlと最後に追加されました。

P.S. foodItems [i] .nameのエスケープ文字を処理する必要があるかもしれません。