title: How to change the like and unlike text to a svg or iframe heart in the ajax code?
body: <blockquote>
  <p>I am trying to change the like and unlike text that displays when a user clicks the svg heart-fill. What I am expecting is that the heart changes color rather than changing to the like and unlike text in the ajax code. I have tried changing the <code>.text</code> to <code>.html</code> but it doesn't work, my ajax knowledge is not strong.
  Here is the code below:</p>
  </blockquote>
  <p><em>HTML:</em></p>
  <pre><code>&lt;form method=&quot;POST&quot; action=&quot;{% url 'like' %}&quot; class=&quot;like-form&quot; id=&quot;{{post.id}}&quot;&gt; 
    {% csrf_token %}
    &lt;input type=&quot;hidden&quot; name=&quot;post_id&quot; value={{post.id}}&gt;
      &lt;div&gt;
        &lt;span class=&quot;like-count{{post.id}}&quot;&gt;{{ post.total_likes }}&lt;/span&gt;
        &lt;button  class=&quot;btn btn-link text-dark p-0 border-0 btn-outline-light like-btn{{post.id}}&quot;&gt;
          {% if user in post.liked.all %}
              &lt;svg class=&quot;redme{{post.id}}&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;red&quot; class=&quot;bi bi-heart-fill&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                &lt;path id=&quot;path&quot; fill-rule=&quot;evenodd&quot; d=&quot;M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z&quot;/&gt;
              &lt;/svg&gt;
          {% else %}
              &lt;svg class=&quot;greyme{{post.id}}&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;grey&quot; class=&quot;bi bi-heart-fill&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                &lt;path id=&quot;path1&quot; fill-rule=&quot;evenodd&quot; d=&quot;M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z&quot;/&gt;
              &lt;/svg&gt;
          {% endif %}
        &lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p><em>JS:</em></p>
  <pre><code>$(document).ready(function(){
      $(&quot;.btn&quot;).on('click', function() {
        $(&quot;svg path&quot;).each(function() {
          if($(this).attr('class') === 'is-colorized'){
            $(this).attr('class', '');
          }else {
            $(this).attr('class', 'is-colorized');
          }
        })
      });
  
      $('.like-form').submit(function(e){
        e.preventDefault();
        
        const post_id = $(this).attr('id')
  
        const likeText = $(`.like-btn${post_id}`).text()
        console.log(likeText)
        const trim = $.trim(likeText)
        const url = $(this).attr('action')
        
        let res;
        const likes = $(`.like-count${post_id}`).text()
        const trimCount = parseInt(likes)
        console.log(trimCount)
  
          $.ajax({
              type: 'POST',
              url: url,
              data: {
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
                'post_id': post_id,
              },
              success: function(response){
                if(trim === 'Unlike'){
                  $(`.like-btn${post_id}`).text('Like'); //I want to change like to svg or iframe heart
                  res = trimCount - 1
                }
                else {
                  $(`.like-btn${post_id}`).text('Unlike'); //I want to change**strong text** like to svg or iframe heart
                  res = trimCount + 1
                }
                $(`.like-count${post_id}`).text(res)
              },
              error: function(response){
                console.log('error', response)
              }
          });
      });
  });
  </code></pre>