如何在jQuery的appendTo函数中正确添加HTML代码实现LinkedIn图标链接

你这里的核心问题是错误使用了text属性来设置HTML内容——jQuery的text()方法（或是创建元素时用text键值对）会把传入的内容当成纯文本渲染，不会解析其中的HTML标签，所以你的Font Awesome图标结构只会被显示成一串文本，而不是预期的图标按钮。

解决方法很简单，把text换成html属性，这样jQuery就会解析并渲染传入的HTML结构了。修正后的代码如下：

$('<a>',{
  html: '<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x linkedincolor"></i><i class="fa fa-linkedin fa-stack-1x"></i></span>',
  title: 'Linkedin',
  href: 'https://www.linkedin.com/',
  target: '_blank',
  click: function(){
    BlahFunc(options.rowId);
    return false;
  }
}).appendTo('.linkedin-header');

补充说明： #

• html属性用于设置元素的内部HTML结构，适合传入包含标签的内容；而text只适合纯文本内容，会自动转义HTML标签。
• 你的click事件里用了return false，这会同时阻止链接的默认跳转行为和事件冒泡。如果后续需要让链接正常跳转（比如BlahFunc执行完后打开新窗口），可以考虑移除return false，或者改用event.preventDefault()只阻止默认跳转，保留事件冒泡。

内容的提问来源于stack exchange，提问作者Pierre-Clément Cazon