Passing FontAwesome (html) as JQuery var/verb

Question

I am learning Django and to create a funtional Like button without need to reload page using Ajax. It is my first contact with JS. It works but I want to pass html (FontAwesome) within this script to show icon together with Likes number.

I tried passing it using "verb" argument in function but it just shows plain text). I also tried to grab html code as var (from similar questions on StackOverflow) but it doesn't work for me (it displays [object Object]). I think I am doing something wrong. The code is below:

<script>
var HtmlHeart = $(this).children("i").attr("class", "fas fa-heart")
$(document).ready(function() {
    function UpdateText(btn, NewCount, HtmlHeart) {
        btn.attr("data-likes", NewCount)
        btn.text(HtmlHeart + " " + NewCount)
    }
    $(".like-btn").click(function(e) {
        e.preventDefault()
        var this_ = $(this)
        var LikeUrl = this_.attr("data-href")
        var LikeCount = parseInt(this_.attr("data-likes")) | 0
        var AddLike = LikeCount + 1
        var RemoveLike = LikeCount - 1
        if (LikeUrl) {
            $.ajax({
                url: LikeUrl,
                method: "get",
                data: {},
                success: function(data) {
                    console.log(data)
                    if (data.liked) {
                        UpdateText(this_, RemoveLike, HtmlHeart)
                    } else {
                        UpdateText(this_, AddLike, HtmlHeart)
                    }
                },
                error: function(error) {
                    console.log(error)
                    console.log("error")
                }
            })
        }
    })
})
</script>

Could you please help me with understanding how it is possible to pass html as var? If needed I will add views.py and .html template code. Thanks!

Answer 1

Use html() method by jquery.

try this,

 //var HtmlHeart = $(this).children("i").attr("class", "fas fa-heart")
 $(document).ready(function() {
  //function UpdateText(btn, NewCount, HtmlHeart) {
    //btn.attr("data-likes", NewCount);
    //btn.text(HtmlHeart + " " + NewCount);
  //}
  $(".like-btn").click(function(e) {
    e.preventDefault();
    var this_ = $(this);
    var LikeUrl = this_.attr("data-href");
    var LikeCount = parseInt(this_.attr("data-likes")) || 0;
    var AddLike = LikeCount + 1;
    var RemoveLike = LikeCount - 1;
    if (LikeUrl) {
      $.ajax({
        url: LikeUrl,
        method: "get",
        data: {},
        success: function(data) {
          console.log(data);
          if (data.liked) {
            //UpdateText(this_, RemoveLike, HtmlHeart);
            $(this_).html(`<i class="fa fa-heart"><i> ${RemoveLike}`)
          } else {
            //UpdateText(this_, AddLike, HtmlHeart);
            $(this_).html(`<i class="fa fa-heart"><i> ${AddLike}`)
          }
        },
        error: function(error) {
          console.log("error", error);
        }
      });
    }
  });
});