出现Fontawesome图标文字，而不是图标

Question

jquery 3.3.1

我正在动态构建锚标记：

 var link = $("<a>");
        link.attr("href", "#");
        link.text("My anchor" + ' <i class="fas fa-people-carry"></i>');

以下代码将生成文字文本“ My anchor i class =“ fas fa-people-carry” / i”，而不是锚标记的文本和实际图标。

如何使实际图标与文字一起显示在锚定标记内？

Answer 1

您需要jQuery html()

link.html("My anchor" + ' <i class="fas fa-people-carry"></i>');

关于.text()的一些说明：

  

...请注意，此方法将根据需要转义提供的字符串，以便将其正确呈现为HTML。为此，它调用DOM方法.createTextNode（），不会将字符串解释为HTML

Answer 2

您不想使用link.text()，请尝试link[0].innerHTML = "My anchor" + ' <i class="fas fa-people-carry"></i>'

您希望HTML将输入的文本解析为HTML，因此innerHTML属性被修改。