使用jQuery创建动态div

Question

I am using jQuery ajax to fetch JSON data.

Below is my code sample. This is my jsfiddle.

Now lot of people told me that making dynamic string is not good.

Can somebody give me a better way to create a 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

You can create a div (or any DOM object) object with jQuery and assign properties to it. For an example:

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

This way is a little bit better (because it improves the readability) than the string concatenation you implemented.

However I suggest you to use a template engine (for example Mustache.js ) if you're searching for a long-term solution and better architecture.

Answer 2

One of the best ways to do templating in the native JavaScript, tried in a large scale project. A very small piece is here for POC.

function(cellValue, options, rowObject) {
                        var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
                        var replacements = {
                            "%Text%": rowObject.EmployeeName,
                            "%ToolTip%": Employee.messages && Employee.messages.ClickHereToEdit
                                ? Employee.messages.ClickHereToEdit : "",
                            "%Href%": "javascript:Employee.openAddEditModal(&apos;" + rowObject.EmployeeId + "&apos;)"
                        };
                        markup = markup.replace(/%\w+%/g, function(all) {
                            return replacements[all];
                        });
                        return markup;
                    }

Answer 3

I usually, for this kind of work, create an hidden template in my html, and then use it.

Then for every item i need to place in my html, i clone the template and insert in the place i want it.

I show you how would i do it usually.

edit You can also bind the click on each item when you insert it.

Look at the .click associated to html.find('.btn-finder')

 var $template = $(".tileBlockTemplate"); $.ajax({ url: 'https://api.myjson.com/bins/1mkxw', method: "GET", headers: { "Accept": "application/json; odata=verbose" }, async: false, success: function(data) { $("#dvPromotion").empty(); $.each(data.results, function(i, item) { var html = $template.clone(); html.removeClass('tileBlockTemplate'); html.find('.tileImage').attr('src', '/PublishingImages/' + item.Title) .attr('alt', item.To.Title); html.find('.greyLabel').html(item.To.Title); html.find('.fareTxt').html(item.Cost + ' ' + item.From.Currency); html.find('.smallTxt').html(item.Class + ' | ' + item.Trip); html.find('.btn-finder').data('item', encodeURIComponent(JSON.stringify(item))) .click(function() { console.dir(JSON.parse(decodeURIComponent($(this).data('item')))); }); $("#dvPromotion").append(html); }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dvPromotion"> </div> <div style='display:none'> <div class="tileBlockTemplate tileBlock"> <img class="tileImage" src="/PublishingImages/abuDhabi.jpg" alt="Abu Dhabi"> <br> <div class="blockCol1 greyLabel">Abu Dhabi</div> <div class="blockCol2 fareTxt">60&nbsp;KWD</div> <div style="clear: both;"></div> <div class=" blockCol3 smallTxt">economy&nbsp;|&nbsp;RT</div> <br> <div style="clear: both;"></div> <div class="btnHolder"> <input name="button" class="btn-finder" type="button" data-item="" href="#" value="Book now"> </div> </div> </div>