如何通过HTML/JS实现点击按钮时在<div>中加载表单

<html>
<body>
  <section>
    <div>
      <section class="upper">
        <ul>
          <li>
            <a href="#">Menu
              <ul>
                <li><a href="#" id="button1" class="menu-button">Button1</a></li>
                <li><a href="#" id="button2" class="menu-button">Button2</a></li>
                <li><a href="#" id="button3" class="menu-button">Button3</a></li>
              </ul>
            </a>
          </li>
        </ul>
      </section>
    </div>
    <div>
      <section class="lower">
        <!-- 这就是我们指定的表单加载容器 -->
        <div id="form-display-area"></div>
      </section>
    </div>
  </section>
</body>
</html>

我给按钮统一加了menu-button类，方便后续统一处理，同时新增了form-display-area容器作为表单的展示位置。

2. 编写JavaScript逻辑 #

这里我推荐用事件委托的方式来处理点击事件（比给每个按钮单独加监听更高效，而且支持动态生成的按钮），具体代码如下：

// 获取表单展示容器
const formDisplayArea = document.getElementById('form-display-area');

// 给按钮的父容器添加事件委托，监听点击
document.querySelector('.upper ul ul').addEventListener('click', function(e) {
  // 阻止a标签默认的跳转行为
  e.preventDefault();
  
  // 判断点击的是不是我们的菜单按钮
  if (e.target.classList.contains('menu-button')) {
    const clickedButtonId = e.target.id;
    
    // 根据按钮ID生成对应表单的HTML
    let formContent = '';
    switch(clickedButtonId) {
      case 'button1':
        formContent = `
          <form class="loaded-form">
            <h3>用户信息表单</h3>
            <div>
              <label for="username">用户名:</label>
              <input type="text" id="username" name="username" required>
            </div>
            <div>
              <label for="user-email">邮箱:</label>
              <input type="email" id="user-email" name="user-email" required>
            </div>
            <button type="submit">提交表单</button>
          </form>
        `;
        break;
      case 'button2':
        formContent = `
          <form class="loaded-form">
            <h3>联系方式表单</h3>
            <div>
              <label for="phone-number">手机号:</label>
              <input type="tel" id="phone-number" name="phone-number" required>
            </div>
            <div>
              <label for="address">联系地址:</label>
              <textarea id="address" name="address" rows="3"></textarea>
            </div>
            <button type="submit">提交表单</button>
          </form>
        `;
        break;
      case 'button3':
        formContent = `
          <form class="loaded-form">
            <h3>个人偏好表单</h3>
            <div>
              <label for="age">年龄:</label>
              <input type="number" id="age" name="age" min="1" max="120">
            </div>
            <div>
              <label>兴趣爱好:</label>
              <input type="checkbox" name="hobby" value="reading">阅读
              <input type="checkbox" name="hobby" value="sports">运动
              <input type="checkbox" name="hobby" value="coding">编程
            </div>
            <button type="submit">提交表单</button>
          </form>
        `;
        break;
      default:
        formContent = '<p>请选择一个按钮加载对应表单</p>';
    }
    
    // 将表单内容插入到指定容器中
    formDisplayArea.innerHTML = formContent;
    
    // 给加载后的表单添加提交事件处理
    const currentForm = formDisplayArea.querySelector('.loaded-form');
    if (currentForm) {
      currentForm.addEventListener('submit', function(submitEvent) {
        submitEvent.preventDefault();
        // 这里可以添加表单提交的逻辑，比如收集数据、发送AJAX请求等
        alert(`表单${clickedButtonId.slice(-1)}提交成功！`);
      });
    }
  }
});

关键知识点解释 #

• 事件委托：我们没有给每个按钮单独绑定点击事件，而是给它们的父容器绑定事件，通过e.target判断点击的元素是不是按钮。这种方式不仅性能更好，还能支持后续动态添加的按钮。
• 阻止默认行为：因为按钮是<a>标签，点击会触发页面跳转，所以用e.preventDefault()来阻止这个默认动作。
• 动态生成表单：通过switch-case根据按钮ID生成不同的表单HTML，然后用innerHTML插入到指定容器中。如果你的表单很复杂，也可以用<template>标签来存放表单模板，然后克隆模板插入，这样代码更易维护。
• 表单提交处理：表单加载完成后，我们给它绑定提交事件，阻止默认的表单提交行为，然后可以添加自定义的处理逻辑（比如发送数据到后端）。

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