title: How to render HTML in string with Javascript?
body: <p>I have the following javascript code:</p>
  
  <pre><code>var html =  '&lt;div class="col-lg-4 col-references" idreference="'+response+'"&gt;&lt;span class="optionsRefer"&gt;&lt;i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"&gt;&lt;/i&gt;&lt;i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"&gt;&lt;/i&gt;&lt;/span&gt;&lt;div id="contentRefer'+response+'"&gt;'+refer_summary+'&lt;/div&gt;&lt;span id="nameRefer'+response+'"&gt;'+refer_name+'&lt;/span&gt;&lt;/div&gt;';
  $("#references").append(html);
  </code></pre>
  
  <p>When this code runs, the <code>refer_summary</code> variable actually contains a string which may contain HTML tags such as <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> etc., however, those tags are displayed on the page instead of rendering their behavior.</p>
  
  <p>For example, on the page it would show <code>&lt;b&gt;</code> rather actually making the content bold. </p>
  
  <p>How can I go about rendering the HTML tags when the value is appended?</p>
  
  <p>In my Django template I use <code>{% autoescape off %}{{content}}{% endautoescape %}</code> so when I first load the page, the content is rendered correctly with bold etc. But how can I do the same thing when appending the html from javascript?</p>
  
  <p>Thanks for the help!</p>