JavaScript中操作innerHTML的规范方法：左侧面板内容切换代码优化咨询

嗨，刚学JavaScript的话，你遇到的这个问题其实很多新手都会碰到～先直接回应你的核心疑问：直接在JavaScript里硬嵌HTML字符串的写法，在做小型原型或者快速测试时偶尔能用，但从可维护性、代码可读性的角度来说，确实不属于前端开发的规范最优实践。等你面板内容变复杂后，这种写法会让代码变得乱糟糟的，HTML和JS缠在一起，改个小细节都要在一大段字符串里找，很容易出错，也不利于后续维护。

下面给你几个更合理的实现方案，从易到难，完全适配你当前的学习阶段：

方案1：提前在HTML中写好所有面板，用CSS控制显示/隐藏（最适合新手） #

这个方法不需要在JS里拼接HTML，只需要通过切换CSS类来控制哪个面板显示，逻辑简单，代码更清晰，完全避开了你觉得难的循环添加元素操作：

修改后的HTML： #

把三个面板都写在left-panel容器里，每个面板加一个专属标识类（比如panel-chat、panel-attendants、panel-tools），默认只显示工具面板，其他面板加hidden类隐藏：

<div class="left-panel">
  <!-- 聊天面板 -->
  <div class="panel-chat chat-box hidden">
    <div class="chat-history">
      <div class="my-messages">
        <div class="message-mine" id="message1">
          <span class="sender"> me: </span><br>
          <span class="content"> testing... </span>
        </div>
      </div>
      <div class="messages">
        <div class="message" id="message1">
          <span class="sender"> me: </span><br>
          <span class="content"> testing... </span>
        </div>
      </div>
    </div>
    <div class="chat-sending-area">
      <div class="send-button">
        <img class="send-message-button" src="chat-dots.svg">
      </div>
      <div class="text-box">
        <textarea class="text-area">Write your message here...</textarea>
      </div>
    </div>
  </div>

  <!-- 参会者面板 -->
  <div class="panel-attendants attendants hidden">
    <div class="Hosts">
      <p class="head">Hosts</p><br>
      <div class="all-the-hosts">
        <p class="member"> name1 </p><br>
      </div>
    </div>
    <div class="Presenters">
      <p class="head">Presenters</p><br>
      <div class="all-the-presenters">
        <p class="member"> name2 </p><br>
      </div>
    </div>
    <div class="Attendants">
      <p class="head">Attendants</p><br>
      <div class="all-the-attendants">
        <p class="member"> name3 </p><br>
      </div>
    </div>
  </div>

  <!-- 工具面板（默认显示） -->
  <div class="panel-tools tools">
    <div class="microphone">
      <img id="mic" src="mic-fill.svg">
      <p id="mic-status"> on_off </p><br>
      <label class="switch"> ‍‍‍‍‍‍‍‍
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
      <input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
      <p> volume </p>
    </div>
    <div class="webcam">
      <img id="webcam" src="camera.svg">
      <label class="switch"> ‍‍‍‍‍‍‍‍
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
      <video src="a.mp4" id="webcam-video"></video>
    </div>
    <div class="options">
      <img id="raise-hand-ico" src="hand-index.svg"><br>
      <img id="like" src="hand-thumbs-up-fill.svg"><br>
      <img id="dislike" src="hand-thumbs-down-fill.svg">
    </div>
    <div class="record">
      <div class="buttons-and-stuff">
        <h6 id="button-and-stuff">Record</h6><br>
        <h6 id="button-and-stuff">Exit</h6>
      </div>
    </div>
  </div>
</div>

添加CSS样式： #

给hidden类加隐藏规则：

.hidden {
  display: none;
}

修改后的JavaScript： #

写一个通用的切换函数，逻辑是先隐藏所有面板，再显示目标面板：

function showPanel(panelClass) {
  // 隐藏所有面板
  const allPanels = document.querySelectorAll('.left-panel > div');
  allPanels.forEach(panel => panel.classList.add('hidden'));
  // 显示目标面板
  const targetPanel = document.querySelector(`.${panelClass}`);
  targetPanel.classList.remove('hidden');
}

然后修改按钮的onclick事件：

• 聊天按钮：onclick="showPanel('panel-chat')"
• 参会者按钮：onclick="showPanel('panel-attendants')"
• 工具按钮：onclick="showPanel('panel-tools')"

这个方案的好处是HTML和JS完全分离，修改面板内容直接在HTML里改，不用碰JS，非常适合新手维护，也是前端开发中切换内容的常用方式。

方案2：优化HTML字符串的写法（如果不想提前写所有面板） #

如果你还是想通过innerHTML来切换，至少可以把HTML字符串单独提取成变量，让JS代码更整洁：

// 把每个面板的HTML单独定义成变量，结构更清晰
const chatPanelHTML = `
<div class="chat-box">
  <div class="chat-history">
    <div class="my-messages">
      <div class="message-mine" id="message1">
        <span class="sender"> me: </span><br>
        <span class="content"> testing... </span>
      </div>
    </div>
    <div class="messages">
      <div class="message" id="message1">
        <span class="sender"> me: </span><br>
        <span class="content"> testing... </span>
      </div>
    </div>
  </div>
  <div class="chat-sending-area">
    <div class="send-button">
      <img class="send-message-button" src="chat-dots.svg">
    </div>
    <div class="text-box">
      <textarea class="text-area">Write your message here...</textarea>
    </div>
  </div>
</div>`;

const attendantsPanelHTML = `
<div class="attendants">
  <div class="Hosts">
    <p class="head">Hosts</p><br>
    <div class="all-the-hosts">
      <p class="member"> name1 </p><br>
    </div>
  </div>
  <div class="Presenters">
    <p class="head">Presenters</p><br>
    <div class="all-the-presenters">
      <p class="member"> name2 </p><br>
    </div>
  </div>
  <div class="Attendants">
    <p class="head">Attendants</p><br>
    <div class="all-the-attendants">
      <p class="member"> name3 </p><br>
    </div>
  </div>
</div>`;

const toolsPanelHTML = `
<div class="tools">
  <div class="microphone">
    <img id="mic" src="mic-fill.svg">
    <p id="mic-status"> on_off </p><br>
    <label class="switch"> ‍‍‍‍‍‍‍‍
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
    <input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
    <p> volume </p>
  </div>
  <div class="webcam">
    <img id="webcam" src="camera.svg">
    <label class="switch"> ‍‍‍‍‍‍‍‍
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
    <video src="a.mp4" id="webcam-video"></video>
  </div>
  <div class="options">
    <img id="raise-hand-ico" src="hand-index.svg"><br>
    <img id="like" src="hand-thumbs-up-fill.svg"><br>
    <img id="dislike" src="hand-thumbs-down-fill.svg">
  </div>
  <div class="record">
    <div class="buttons-and-stuff">
      <h6 id="button-and-stuff">Record</h6><br>
      <h6 id="button-and-stuff">Exit</h6>
    </div>
  </div>
</div>`;

// 原来的函数就变得非常简洁
function show(){
  document.getElementsByClassName('left-panel')[0].innerHTML = chatPanelHTML;
}
function show2(){
  document.getElementsByClassName('left-panel')[0].innerHTML = attendantsPanelHTML;
}
function show3(){
  document.getElementsByClassName('left-panel')[0].innerHTML = toolsPanelHTML;
}

这样虽然还是把HTML放在JS里，但至少结构分离了，可读性和维护性会好很多。

总结 #

• 你当前的写法不算错误，但不适合长期维护，尤其是当面板内容越来越复杂时；
• 最推荐你用方案1（CSS控制显示隐藏），这是前端开发中常用的切换内容的方式，逻辑清晰，代码分离；
• 如果以后你学习了前端框架（比如Vue、React），会有更优雅的组件化方式来实现这种面板切换，但现在先用适合你当前阶段的方法就好。

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