切换包含内嵌HTML元素的span文本时Font Awesome图标丢失问题求助

问题原因 #

jQuery 的 text() 方法赋值时会清空目标元素内所有子节点（包括嵌套的 <i> 标签），仅保留传入的纯文本内容。如果直接将带HTML标签的字符串传入 text()，会被当做纯文本渲染，不会解析为DOM元素。如果改用html()方法直接传入带标签的字符串虽然能渲染元素，但会频繁重写<i>节点，可能影响绑定在<i>上的CSS动画效果。

最优解决方案 #

只修改<span>内的纯文本节点，不触碰嵌套的<i>元素，完全保留原有DOM结构和动画绑定，修改后的JS代码如下：

$('.button').click(function() {
    // 切换图标类，原有逻辑无需改动
    $('.button i').toggleClass('fa-angle-up fa-angle-down');
    // 仅修改span下第一个文本节点的内容
    const textNode = $('.button span').contents().first()[0];
    textNode.nodeValue = textNode.nodeValue.trim() === 'View More' ? 'View Less' : 'View More';
});

备选方案（无动画影响场景可用） #

如果你的CSS动画不受DOM节点重写影响，也可以直接用html()方法替换整段内容：

$('.button').click(function() {
    const $span = $('.button span');
    $span.html($span.text().trim() === 'View More' 
        ? 'View Less<i class="fas fa-angle-up"></i>' 
        : 'View More<i class="fas fa-angle-down"></i>'
    );
});

内容的提问来源于stack exchange，提问作者Katarina Perović