How to append html div to a table in response to jQuery getJSON

Question

I'm trying to do the following:

$.getJSON("script/course_session.php", data, function(data) {
$.each(data, function(i, item) {

  var $tr = $('<tr>').append(
        $('<td>').text(item.start_date + " - " + item.end_date),
        $('<td>').text(
          '<div class=&quot;col-md-3 btn-buy animated fadeInRight&quot;><a href=&quot;#&quot; class=&quot;btn-u btn-u-sm enroll-button&quot;><i class=&quot;fa fa-university&quot;></i> Register</a></div>')
      ).appendTo("#session-table");
});
});

The intent being to achieve something like the following (I'm using Bootstrap):

However, this is how it gets printed:

What is the correct way to render html?

Answer 1

You have to use .html(...) instead of .text(). And " instead of quot;

Answer 2

.html()

A string of HTML to set as the content of each matched element.

.text()

The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.

The difference is the .html(str) will convert str the to a DOM if the str have a tag content and the .text() must convert str to a text even if str contains XML or html.