如何实现点击文本转换为新元素（如分隔符）的网页交互效果？

先修正你现有代码的问题 #

你写的代码存在3个核心错误：

• JS语法错误：document.getElementById("angelo")与InnerText之间缺少.，且InnerText需改为小写开头的innerText（JS采用驼峰命名规则）
• innerText仅能处理纯文本，无法解析HTML标签，要插入HTML元素需使用innerHTML
• 字符串嵌套双引号冲突：你在双引号包裹的字符串内又使用了双引号id="info"，会触发语法报错，可改为单引号id='info'或转义双引号id=\"info\"

修正后的代码如下：

<img src="yay.png">
<p id="angelo" onclick="myFunction()">ANGELO</p>
<script>
function myFunction() {
  // 用innerHTML替代innerText，同时修正引号冲突
  document.getElementById("angelo").innerHTML = '<div id="info">Blabla</div>';
}
</script>

实现「点击右侧元素切换左侧内容」的目标效果 #

下面是模仿目标页面逻辑的完整示例，点击右侧的骷髅表情（或其他触发元素），左侧盒子会切换显示不同内容：

HTML结构 #

<!-- 整体布局容器 -->
<div class="container">
  <!-- 左侧可切换内容的盒子 -->
  <div id="leftBox" class="content-box">
    <!-- 默认显示内容 -->
    <img src="default-image.png" alt="默认图片">
  </div>
  <!-- 右侧触发按钮区域 -->
  <div class="trigger-group">
    <span onclick="switchContent('skull')" class="trigger-btn">💀</span>
    <span onclick="switchContent('text')" class="trigger-btn">📝</span>
    <span onclick="switchContent('scroll')" class="trigger-btn">📜</span>
  </div>
</div>

CSS样式（简单美化布局） #

.container {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  padding: 20px;
}

.content-box {
  width: 320px;
  height: 320px;
  border: 2px solid #222;
  padding: 12px;
  overflow: hidden;
}

.trigger-btn {
  font-size: 35px;
  cursor: pointer;
  display: block;
  margin: 15px 0;
  transition: transform 0.2s;
}

.trigger-btn:hover {
  transform: scale(1.1);
}

JavaScript逻辑 #

function switchContent(contentType) {
  const leftBox = document.getElementById("leftBox");
  
  // 根据点击的触发类型，切换左侧盒子内容
  switch(contentType) {
    case 'skull':
      // 切换为骷髅主题图片
      leftBox.innerHTML = '<img src="skull-image.png" alt="骷髅图片" style="width:100%;height:100%;object-fit:cover;">';
      break;
    case 'text':
      // 切换为文本输入框
      leftBox.innerHTML = '<textarea placeholder="在这里输入内容..." style="width:100%;height:100%;border:none;resize:none;"></textarea>';
      break;
    case 'scroll':
      // 切换为可滚动文本区域
      leftBox.innerHTML = '<div style="height:100%;overflow:auto;">这是一段可滚动的长文本示例<br>'.repeat(25) + '</div>';
      break;
    default:
      // 恢复默认内容
      leftBox.innerHTML = '<img src="default-image.png" alt="默认图片" style="width:100%;height:100%;object-fit:cover;">';
  }
}

代码说明 #

1. HTML将左侧内容区与右侧触发区分离，给左侧盒子设置唯一ID，方便JS定位操作
2. 右侧每个触发元素绑定onclick事件，传递不同的类型参数，告知JS需要切换的内容类型
3. JS通过getElementById获取左侧盒子，使用innerHTML替换内部内容，通过switch语句匹配不同类型，生成对应的HTML结构

内容的提问来源于stack exchange，提问作者mrsmiler