我遇到了一个问题。 “显示更多”旁边有一个图标。按下时它消失了，因为 innerText 被替换了所以我试过这个:
document.getElementById("toggleButton").innerText = "Show Less <i class="fas fa-caret-down"></i>" ;
这似乎没有任何建议？
var status = "less";
function toggleText()
{
if (status == "less") {
document.getElementById("textArea").style.display = "block";
document.getElementById("toggleButton").innerText = "Show Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").style.display = "none";
document.getElementById("toggleButton").innerText = "Show More";
status = "less"
}
}<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div id="textArea" style="display: none;">
test
</div>
<button type="button" id="toggleButton" onclick="toggleText();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>
<div id="textArea" style="display: none;">
</div
</body>
</html>最佳答案
如果文本字符串包含需要呈现的 html，则需要使用 innerHTML 而不是 innerText:
document.getElementById("toggleButton").innerHTML
关于javascript - 将图标放在按钮旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50194927/