在Javascript中附加HTML

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)
});