如何用JS添加DOM实现点击提交按钮后隐藏首页并显示第二页？

1. 基础HTML结构 #

先搭建页面框架，包含首页、第二页容器和提交按钮：

<!-- 首页容器 -->
<div id="homePage">
  <h2>首页内容</h2>
  <p>这里是首页的展示内容</p>
  <button id="submitBtn">提交</button>
</div>

<!-- 第二页容器（初始隐藏） -->
<div id="secondPage" style="display: none;">
  <h2>第二页内容</h2>
  <p>点击提交后显示这部分内容</p>
</div>

2. JavaScript核心逻辑 #

直接操作DOM元素的显示状态，同时支持动态添加DOM元素：

// 获取页面元素
const homePage = document.getElementById('homePage');
const secondPage = document.getElementById('secondPage');
const submitBtn = document.getElementById('submitBtn');

// 绑定点击事件
submitBtn.addEventListener('click', function() {
  // 切换页面显示状态
  homePage.style.display = 'none';
  secondPage.style.display = 'block';

  // 动态添加带ID的DOM元素示例
  const dynamicPara = document.createElement('p');
  dynamicPara.id = 'newContent';
  dynamicPara.textContent = '这是点击提交后动态生成的内容';
  secondPage.appendChild(dynamicPara);
});

3. 你之前的问题排查 #

• 用buttonclick.innerHTML设置ID是错误操作，正确方式是直接修改元素的id属性，比如element.id = 'yourTargetId'
• 确保JS代码在页面DOM加载完成后执行，否则会出现获取不到元素的情况：
  • 可以把JS代码放在<body>标签末尾
  • 或者用DOMContentLoaded事件包裹：

    document.addEventListener('DOMContentLoaded', function() {
      // 所有DOM操作逻辑写在这里
    });
    

补充：函数名绑定事件的写法 #

如果你习惯用HTML直接绑定函数（比如你提到的click me，注意函数名不能有空格，改为clickMe）：

<button onclick="clickMe()">提交</button>

function clickMe() {
  document.getElementById('homePage').style.display = 'none';
  document.getElementById('secondPage').style.display = 'block';

  // 动态添加带ID的按钮示例
  const dynamicBtn = document.createElement('button');
  dynamicBtn.id = 'actionBtn';
  dynamicBtn.textContent = '动态按钮';
  document.getElementById('secondPage').appendChild(dynamicBtn);
}

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