JS对象在html中的格式化问题

JS Object formatting in html issue

本文关键字：格式化 问题 html 对象 JS      更新时间：2023-09-26

我有一个在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 

<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>

试试这个:

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并在末尾添加。

注:你可能需要注意你的foodItems[i].name中的转义字符。

相关文章：