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在浏览器中呈现后会显示

<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时，浏览器可能会自动纠正＆＃34; html并在最后添加。

P.S。你可能需要在foodItems [i] .name中处理转义字符。

html问题中的JS对象格式化

1 个答案: