在 Javascript/jQuery 中附加带有变量的大块 HTML答案

【问题标题】：Append large block of HTML with variables in Javascript/jQuery在 Javascript/jQuery 中附加带有变量的大块 HTML
【发布时间】：2016-03-08 10:06:51
【问题描述】：

我有一个 for 循环，它遍历一些 JSON 数据，对于每个 JSON 对象，我需要输出一大块 HTML，如下所示：

<div class="hotel-result independent">
  <div class="col-xs-12 col-sm-12 col-md-8">
    <div class="hotel-type"><span class="independent">Independent Garage</span></div>
    <h3>Hotel Name</h3>
    <div class="meta-info">
      <span class="distance">
        <i class="fonticon-map-marker"></i>
        1.6 miles from N1 2NL
      </span>
      <span class="telephone hidden-xs">
        <i class="fonticon-telephone2"></i>
        92358023523
      </span>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4">
    <div class="service">Room</div>
      <div class="price-wrap">
        <span class="currency">£</span>
        <span class="price">30.95</span>
        <span class="vat small">inc VAT</span>
      </div>
      <a class="button teal has-icon-right" href="#">
        Book online
        <i class="fonticon-chevron-right"></i>
      </a>
      <a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">
        Touch to call
        <i class="fonticon-telephone2"></i>
      </a>
    </div>
  </div>
</div>

需要从 JSON 数据中输出酒店名称、距离、邮政编码等元素。

我正在尝试找出最好的方法，用纯 javascript、document.createElement/appendChild 等写出来，似乎很啰嗦，我想知道是否有更好/更清洁的方法？

我在网上找到了其他示例，但仅适用于 HTML 的数量非常少或不需要将数据传递到输出的 HTML 的情况。任何建议将不胜感激。

------- JSON 数据示例 -------

[{
  id: 0
  name: Hotel Name
  postcode: N1 2NL
  lat: latitude
  lng: Longitude
  hotel_type: independent 
  room_prices: [
    { id:35235325
      room_type: king
      room_price: 356.0
    }
    { id:23532523
      room_type: single
      room_price: 50.0
    }
  ]
}]

这只是 JSON 类型的一个简单示例。

【问题讨论】：

解析后的 json 集合中的每个对象的 html 模式是否相同？什么是集合数组，散列？
还有为什么纯js，你加了jquery标签，你用还是不用jquery？
@kidwon，除了少数类发生变化之外，每个对象的模式都是相同的。即上面的
也可能是
取决于结果中的酒店类型。我确实在使用 jQuery，所以请随意推荐一个好的 jQuery 方法:)
依赖于什么是independent和official类？
你能给我们举个 JSON 数据的例子吗？

function createHotelPattern (data) { var pattern = [ '<div class="hotel-result ', data.hotel_type, '">', '<div class="col-xs-12 col-sm-12 col-md-8">', '<div class="hotel-type">', '<span class="independent">Independent Garage</span>', '</div>', '<h3>', data.name, '</h3>', '<div class="meta-info">', '<span class="distance"> <i class="fonticon-map-marker"></i>', '1.6 miles from ', data.postcode, '</span>', '<span class="telephone hidden-xs"> <i class="fonticon-telephone2"></i>', data.phone, '</span>', '</div>', '</div>', '<div class="col-xs-12 col-sm-12 col-md-4">', '<div class="service">', data.currency, '</div>', '<div class="price-wrap">', '<span class="currency">', data.room_type, '</span>', '<span class="price">', data.room_price, '</span>', '<span class="vat small">', 'inc VAT', '</span>', '</div>', '<a class="button teal has-icon-right" href="#">', 'Book online', '<i class="fonticon-chevron-right"></i>', '</a>', '<a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">Touch to call<i class="fonticon-telephone2"></i></a>', '</div>', '</div>' ]; return pattern.join(''); }