Javascript 将图标放在按钮旁边

我遇到了一个问题。“显示更多”旁边有一个图标。按下时，它会消失，因为内部文本会被替换，所以我尝试了以下方法：

 document.getElementById("toggleButton").innerText = "Show Less <i class="fas fa-caret-down"></i>" ;

测试
显示更多
如果文本字符串包含需要呈现的html，则需要使用
innerHTML
而不是
innerText
：

document.getElementById("toggleButton").innerHTML

我建议改为切换一个类，在这里结合两个文本变体的伪类

堆栈片段


函数切换文本（）
{    
document.getElementById（“textArea”）.classList.toggle（'hide'）；
document.getElementById（“toggleButton”）.classList.toggle（“less”）；
}
button:：before{
内容：'显示更多'；
}
button.less:：before{
内容：“少展示”；
}
.textarea.hide{
显示：无；
}

测试
问题在于您正在此处替换按钮的全部内容：

document.getElementById("toggleButton").innerText = "Show Less";

您正在覆盖原始文本和图标，只需
“显示较少”

要解决此问题，您可以使用设置图标的新文本和HTML：

buttonText.innerHTML = `Show Less <i class="fas fa-caret-up"></i>`;


显示更多

更多

为什么不改用Unicode<强>⮟⮋虽然非常简单，但这并不是一个真正的选项，因为大多数手机浏览器和一些linux浏览器最终都会看到boxesI。现在情况开始好转。我应该删除此帖子吗？@Cryptopat这是一个有效的答案，所以不要删除它，只显示一个箭头语法，然后发布到资源的链接。