jQuery .append() not rendering html entity

Question

I have a variable with html in it like this:

var html = '<div>Hello, you&#39;re awesome!</div>';

I want to append it to an element $("body").append(html) for some reason it's not decoding the HTML Entity. I tried $("body").append($(html)); and that didn't work. My text is stuck inside the element and I can't individually put it together.

Is there any way to append html with a text-based entity inside it into another element, and have the html entity render on the page?

I've read a bunch of posts on stackoverflow reguarding html entities and it seems that none of them include the html & text within a variable like this.

Answer 1

Try this:

var html = $('<div>Hello, you&#39;re awesome!</div>');
$("body").append(html)

Demo here

Answer 2

It could be possible that your page did not finish loading while the jQuery code was trying to append the content. Try:

$(document).ready(function (){
  var html = '<div>Hello, you&#39;re awesome!</div>';
  $('body').append(html)
});

And I would suggest using single quotations only unless you need to use escaped characters.