按钮旁图标点击消失求助：innerText替换导致图标失效

嘿，这个问题我之前也踩过坑！核心问题出在你用了innerText——它只会把内容当作纯文本渲染，不会解析HTML标签，所以你写的<i class="fas fa-caret-down"></i>直接变成字符串显示出来了，根本没被渲染成Font Awesome图标，看起来就像图标消失了一样。

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

方案1：改用innerHTML替代innerText #

innerHTML会把字符串当作HTML解析，这样你的图标标签就能正常渲染了。修改你的代码如下：

var status = "less"; 
function toggleText() { 
  if (status == "less") { 
    document.getElementById("textArea").style.display = "block"; 
    // 用innerHTML替代innerText，直接写入HTML结构
    document.getElementById("toggleButton").innerHTML = 'Show Less <i class="fas fa-caret-down"></i>'; 
    status = "more"; // 别忘了切换状态
  } else {
    document.getElementById("textArea").style.display = "none";
    document.getElementById("toggleButton").innerHTML = 'Show More <i class="fas fa-caret-up"></i>';
    status = "less";
  }
}

⚠️ 注意：如果按钮文本包含用户输入的内容，用innerHTML会有XSS风险，但这里是固定文本，完全没问题。

方案2：更优雅的结构化处理（推荐） #

直接替换整个按钮内容不够灵活，推荐把按钮的文本和图标分开管理，这样只需要修改文本部分，图标通过CSS类切换方向，代码更易维护：

首先修改按钮的HTML结构：

<button id="toggleButton">
  <span class="btn-text">Show More</span>
  <i class="fas fa-caret-down"></i>
</button>

然后更新JS逻辑：

// 避免用保留字"status"，改成更清晰的变量名
let toggleStatus = "less"; 

function toggleText() { 
  const btn = document.getElementById("toggleButton");
  const textArea = document.getElementById("textArea");
  
  if (toggleStatus === "less") { 
    textArea.style.display = "block"; 
    // 只修改文本内容
    btn.querySelector(".btn-text").textContent = "Show Less";
    // 切换图标方向
    btn.querySelector("i").classList.replace("fa-caret-down", "fa-caret-up");
    toggleStatus = "more"; 
  } else {
    textArea.style.display = "none";
    btn.querySelector(".btn-text").textContent = "Show More";
    btn.querySelector("i").classList.replace("fa-caret-up", "fa-caret-down");
    toggleStatus = "less";
  }
}

这种方式的好处是：不用拼接HTML字符串，更安全；图标不会消失，只是切换样式；后续要修改文本或图标样式也更方便。

内容的提问来源于stack exchange，提问作者Reginald1234