Appending html in Javascript

Question

I'm trying to edit a Wordpress plugin that uses JavaScript. I want to have HTML in the description field, but currently the JavaScript is outputting text, not translating it to HTML.

For instance, when the description is

Test <p>html</p>

It prints it with the <p>, instead of rendering a new paragraph.

function appendPersonality(quiz, personality, hasTitle, hasImage, hasDescription) {
  var $personality, $title, $description, $image;

  $title = createIf(hasTitle, '<h2>', { 'html': personality.name });

  if (personality.image.file) {
    $image = createIf(hasImage, '<img>', {
      'class': classes('result-image'),
      'src': _getPath(personality.image.file.path),
      'alt': personality.image.alt
    });
  }

  $description = createIf(hasDescription, '<p>', {
    'html': personality.description
  });

  // NOTE (Emil): We only create $personality element if it has at least
  // one child element.
  if (hasTitle || hasImage || hasDescription) {
    $personality = $('<div>', { 'class': classes('personality') });

    $personality.append($title);
    $personality.append($image);
    $personality.append($description);
  }

  quiz.$resultWrapper.append($personality);

  setInlineImageHeight($image, $personality, quiz.$resultWrapper);

  return $personality;
}

Why does 'html': personality.description not render html?

Answer 1

I took at the codes you posted, it should be fine. But my suggestion is to check the value of personality.description, it might be escaped at some point. you can unescape it using

(The function unescapeHTML is taken from Arun P Johny's answer)

function unescapeHtml(safe) {
    return safe.replace(/&/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&quot;/g, '"')
        .replace(/&#039;/g, "'");
}

...

$description = createIf(hasDescription, '<p>', {
  'html': unescapeHtml(personality.description)
});