javascript - JS，使用 HTML 而不是变量

Question

我有一个“显示更多”按钮，它可以正常工作。我遇到的问题是，它使用来自 var text 的文本我希望它直接从 HTML 使用它，有什么建议吗？

var status = "less";

function toggleText() {
  var text = "TEST";

  if (status == "less") {
    document.getElementById("textArea").innerHTML = text;
    document.getElementById("toggleButton").innerText = "See Less";
    status = "more";
  } else if (status == "more") {
    document.getElementById("textArea").innerHTML = "";
    document.getElementById("toggleButton").innerText = "See More";
    status = "less"
  }
}

<div id="textArea">
  <!-- Here I want to implement HTML code and show it when clicked "See More"-->
</div>

<a id="toggleButton" onclick="toggleText();" href="javascript:void(0);">See More</a>

Answer 1

您可以简单地更改相关元素的 display CSS 属性

var status = "less";

function toggleText()
{
    
    if (status == "less") {
        document.getElementById("textArea").style.display = "block";
        document.getElementById("toggleButton").innerText = "See Less";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").style.display = "none";
        document.getElementById("toggleButton").innerText = "See More";
        status = "less"
    }
}

<div id="textArea" style="display: none;">
    Here I want to implement HTML code and show it when clicked "See More"
</div>


<a id="toggleButton" onclick="toggleText();" href="javascript:void(0);">See More</a>