在javascript中输出html

Question

I have been upgrading legacy pages to load data with AJAX.

The ajax call returns an object with custom properties

{ 
  item: {
    id: 1,
    name: 2,
   ...
  }
}

In my AJAX call I am building the elements

$.post("./url/returns-json", query, function(data) {
   var response = JSON.parse(data);
   $.each(response , function(i, v){
       var r = '<div class="style-this"><p>';
       var r += v.name;
       var r += '</p></div>';
       $("item-wrap").append(r);
   });
});

is there another way to wrap json response in HTML for display.

This method can get very untidy when building big HTML elements

Answer 1

The best approach might be this:

$('#item-wrap').append(
  $('<div>').addClass('style-this').append(
    $('<p>').text(v.name)
  )
);

In my opinion, jQuery is actually great to dynamically build HTML structures. By indenting the code, the structure is visible very well and utility functions such as text allow you to insert content safely (see XSS).

I assumed item-wrap was actually an element identifier, not a tag name. This does not affect my answer.