如何用jQuery each方法为li元素前置Font Awesome图标并解决文本渲染问题

嘿，我一眼就看出问题所在啦！你现在用的是原生DOM元素的prepend()方法，它对字符串的处理是当作纯文本节点插入，而不是解析成HTML元素，所以才会把<span class='fa fa-arrow-right'></span>直接显示成文本，而不是渲染成图标。

下面给你几种可行的解决方案：

方案1：用jQuery的prepend()方法 #

既然你已经引入了jQuery，直接把DOM元素转换成jQuery对象，调用jQuery版本的prepend()就可以自动解析HTML字符串啦：

$('.willHaveArrows li').each((i, e) => $(e).prepend("<span class='fa fa-arrow-right'></span>"))

方案2：用原生JS的insertAdjacentHTML() #

原生JS里的insertAdjacentHTML()方法专门用来插入HTML字符串，不会把内容当成纯文本。afterbegin参数表示在元素内部的最开头插入，和prepend效果一致：

$('.willHaveArrows li').each((i, e) => e.insertAdjacentHTML('afterbegin', "<span class='fa fa-arrow-right'></span>"))

方案3：手动创建DOM元素（更安全） #

如果担心HTML字符串存在注入风险（比如未来内容包含用户输入），可以手动创建DOM元素再插入，这种方式更严谨：

$('.willHaveArrows li').each((i, e) => {
  const arrowIcon = document.createElement('span');
  arrowIcon.classList.add('fa', 'fa-arrow-right');
  e.prepend(arrowIcon);
});

这三种方法都能让Font Awesome箭头图标正确渲染在每个<li>的开头，而不是显示成字符串哦~

内容的提问来源于stack exchange，提问作者Julio Rodríguez