在Javascript中附加HTML

Question

我正在尝试编辑使用JavaScript的Wordpress插件。 我想在说明字段中使用HTML，但是目前JavaScript正在输出文本，而不是将其翻译为HTML。

例如，当描述是

Test <p>html</p>

它使用<p>打印，而不呈现新的段落。

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

为什么'html': personality.description无法呈现html？

Answer 1

我看了您发布的代码，应该没问题。 但是，我的建议是检查的价值personality.description ，它可能会在某个时候进行转义。 您可以使用以下方法取消转义

（函数unescapeHTML来自Arun P Johny的答案 ）

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