如何使文本在单击时变成新元素（如分隔线）？

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`