javascript - 使用 jQuery 创建动态 div

Question

我正在使用 jQuery ajax 来获取 JSON 数据。

下面是我的代码示例。 This是我的jsfiddle。

现在很多人告诉我制作动态字符串不好。

有人可以给我一个更好的方法来创建 div 吗？

$.ajax({
  url: 'https://api.myjson.com/bins/1mkxw',
  method: "GET",
  headers: { "Accept": "application/json; odata=verbose" },
  async: false,
  success: function (data) {
    let html;
    $.each(data.results, function (i, item) {
      html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>';
      html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + '&nbsp;' + item.From.Currency + '</div><div style="clear: both;"></div>';
      html += '<div class=" blockCol3 smallTxt">' + item.Class + '&nbsp;|&nbsp;' + item.Trip + '</div><br><div style="clear: both;"></div>';
      html += '<div class="btnHolder"><input name="button" class="btn-finder" type="button" data-item="' + encodeURIComponent(JSON.stringify(item)) + '" class="searchBtn wth150" href="#" value="Book now" /></div></div>';
    });
    $("#dvPromotion").empty();
    $("#dvPromotion").html(html);
  }
});

// Attach an event listener to the document element (or any other parent element of your buttons)
$(document).on('click', '.btn-finder', function() {
  console.dir(JSON.parse(decodeURIComponent($(this).data('item'))));
});

Answer 1

您可以使用 jQuery 创建一个 div(或任何 DOM 对象)对象并为其分配属性。 举个例子:

// Create an image tag with appropriate properties
var img = jQuery('<img/>', {
    src: '/PublishingImages/'
});

// Create a div tag with appropriate properties
var div = jQuery('<div/>', {
    class: 'tileBlock'
});

// Append the image tag in the div
div.append(img);

这种方式比您实现的字符串连接要好一点(因为它提高了可读性)。

但是，如果您正在寻找长期解决方案和更好的架构，我建议您使用模板引擎(例如 Mustache.js )。