使用jQuery创建Font Awesome图标显示为[object Object]问题求助

核心问题：混用原生DOM与jQuery对象 #

你代码里的parent是通过原生JS的querySelector获取的原生DOM元素，而unlockIcon是jQuery创建的jQuery对象。调用原生DOM的append()方法时，它无法识别jQuery对象，会默认把对象转成字符串形式，也就是你看到的[object Object]。

两种解决方式 #

方式1：将原生DOM对象转为jQuery对象 #

把获取parent的代码改成jQuery写法，之后用jQuery的append()方法：

let unlockIcon = $('<i>').addClass('fa-solid fa-unlock unlock lock');
// 转成jQuery对象
let parent = $(clueBox.querySelector(".lockedClueContent"));
parent.append(unlockIcon);

方式2：从jQuery对象中取出原生DOM元素 #

直接提取jQuery对象里的原生DOM节点，传给原生append()：

let unlockIcon = $('<i>').addClass('fa-solid fa-unlock unlock lock');
let parent = clueBox.querySelector(".lockedClueContent");
// 取出第一个（也是唯一一个）原生元素
parent.append(unlockIcon[0]);

额外优化：抖动动画的小问题 #

你当前的循环调用animate()会把所有动画加入队列，导致抖动是依次执行的。如果想让抖动更连贯，可以设置动画的queue为false，或者用jQuery的effect("shake")（需引入jQuery UI），示例：

// 用内置shake效果更简单（需引入jQuery UI）
unlockIcon.effect("shake", {times:10, distance:50}, 200);

内容的提问来源于stack exchange，提问作者Linnéa Andersson