如何使文字在點擊時變成新元素（如分隔線）？

Question

我正在嘗試找到一種方法，使頁面上的某些文字在單擊時變成分隔符號/新元素。我不知道如何解釋它，但是就像，想像一個下面帶有標題的圖像 - 單擊標題，然後上面的圖像變得像一個文本框/不同的圖像/可滾動的分隔符。我正在嘗試實現此處頁面的效果，其中單擊右側的頭骨表情符號會導致左側框中出現一個新的 div / 圖像。我正在查看原始程式碼並檢查她做了什麼來實現這種效果，但我仍然不確定是什麼。

我正在嘗試使用 w3schools onclick 指南進行某些操作

`<img src="yay.png">
<p id="angelo" onclick="myFunction()">ANGELO</p>
<script>
function myFunction() {
document.getElementById("angelo") InnerText =" <div id="info"> Blabla </div> " ;
}
</script>`

我對java不太了解——事實上我只用過一次！所以這對我沒有任何幫助，因為我只是試著找出一些方法來讓它發揮作用，儘管我有一種強烈的感覺我做錯了。

Answer 1

在此，您可以按一下文字以顯示包含某些文字的 div 並隱藏您按一下的文字。

  
BlaBlaBla
  
ANGELO
    sssccc`