title: How to achieve string interpolation while appending html inside a div using Javascript
body: <p>Might be a silly question but here it is.
  I am trying to insert some html inside my div based on data received from my backing java controller. It all works fine but I am not aware how to interpolate strings from the data I receive into the paragraph tag of my jsp.</p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          var url = "${context}/support/ajax";
          $.ajax({
              type : 'GET',
              url : url,
              dataType : 'json',
              success : function(data, status, xhr) {
  
                  data.forEach(function(data) {
                      if (data.userType == 'O') {
                          $( ".chats" ).append(`
                                  &lt;div class='chat-avatar'&gt;
  
  
                                  &lt;a class='avatar' data-toggle='tooltip' href='#'
                                      data-placement='right' title='' data-original-title=''&gt; &lt;img
                                      src='&lt;c:url value = '/app-assets/images/portrait/small/avatar-s-1.png'/&gt;'
                                      alt='avatar'&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class='chat-body'&gt;
                                  &lt;div class='chat-content'&gt;
                                      &lt;p&gt;{data.comment}&lt;/p&gt; // **This is what I want to achieve**
                                  &lt;/div&gt;
                              &lt;/div&gt;
                                  `);
  
                      } 
  
                  });
              }
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>The above ajax call works fine an I do receive data. Also, I am able to insert this html into the appropriate div element. Now I want to insert the data.comment value inside the p element . </p>
  
  <p>How do I do this ?</p>
  
  <p><strong>EDIT --1</strong></p>
  
  <p>After using `${expression}` syntax, the <code>&lt;p&gt;</code> tag comes as blank  in the broswer console while clearly the value is present.</p>
  
  <p><a href="https://i.stack.imgur.com/MkMS6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MkMS6.jpg" alt="dev tools"></a></p>
  
  <p><strong>EDIT--2</strong></p>
  
  <p>I don't know why but <code>"&lt;p&gt;"+d.comment+"&lt;/p&gt;"</code>  is working. But not interpolation.</p>