title: How to render html dynamically?
body: <p>I have data like:</p>
  
  <p><code>&amp;lt;p&amp;gt;50 Roses in a Heart Shape&amp;lt;span style=&amp;quot;font-family: Arial, Helvetica, sans-serif; line-height: 15px;&amp;quot;&amp;gt;; Make your recipient the princess of the day with this lovely and luxurious bouquet.&amp;lt;\/span&amp;gt;&amp;lt;\/p&amp;gt;\u000d\u000a</code></p>
  
  <p>which i want to append to my div dynamically from jquery. How do I do that?</p>
  
  <p>Here is what I am doing:</p>
  
  <pre><code>var param = '{"CategoryId":72}';
      $.ajax({
              type:'POST',
              url : serviceUrl,
              dataType:"json",
              data:param,
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              async: true,
              cache: false,
              success : function (msg) {
  
              $.each(msg, function(index, table) {
              var data=' &lt;div class="ui-block-c"&gt;';
              data+=' &lt;div class="ui-body ui-body-d"&gt;';
              data+=' &lt;h4&gt;'+table.Name+'&lt;/h4&gt;';
              data+=' &lt;p&gt;';
              data+= table.Description;
              data+='&lt;/p&gt;';
              data+=' &lt;img src="img/pink coral roses.jpg" alt="" style="width:100%;"&gt;';
              data+=' &lt;p&gt;'+table.Price+'&lt;/p&gt;';
              data+=' &lt;button class="ui-btn ui-btn-inline"&gt;Add To Cart&lt;/button&gt;';
              data+=' &lt;/div&gt;';
              data+=' &lt;/div&gt;';
              alert(data);
              $('.mainGrid').append(data);
  
        });
              },
              error : function (XMLHttpRequest, textStatus, errorThrown) {
                  alert('Error in LoadLayout');
  
              }
      });
  </code></pre>
  
  <p>Here <code>table.Description</code> returns the string I mention on top and <code>.mainGrid</code> is the class of the div I want to append data to. My above code does not render the string as Html. How do I do that?</p>