如何使用innerHTML/insertAdjacentHTML和JavaScript替换Div内容？

我明白你现在的处境——懂原理但不知道怎么把代码落地，尤其是JavaScript这块，通过实践学习绝对是最有效的方式！咱们一步步来解决这个问题，先从原生JavaScript的方案说起（帮你吃透底层逻辑），之后再给你jQuery的简化版本，你可以根据自己的需求选择。

核心思路梳理 #

你的需求很明确：点击不同按钮，用对应的HTML内容替换Section里的初始内容。本质上就是监听按钮点击事件 → 定位目标内容 → 切换/替换当前显示的内容。下面是两种最适合你当前场景的实现方式：

方式一：原生JS + 内容块显隐切换（最简单易上手） #

这个方案把所有内容都写在HTML里，只是通过CSS控制显示/隐藏，逻辑清晰，非常适合新手学习。

步骤1：调整HTML结构 #

首先修改按钮，给每个按钮加上data-target属性（对应要显示的内容ID），同时去掉target="_blank"（不需要打开新页面）；然后把注释的内容块都放开，给它们统一加个类content-block，初始只显示第一个，其他隐藏：

<section class="section-web new-section__white section new_section" id="web">
  <div class="row web-btns">
    <div class="col span-2-of-2 ">
      <a class="btn btn-ghost" href="#" data-target="button-1">Button 1</a>
      <a class="btn btn-ghost" href="#" data-target="button-2">Button 2</a>
      <a class="btn btn-ghost" href="#" data-target="button-3">Button 3</a>
      <a class="btn btn-ghost" href="#" data-target="button-4">Button 4</a>
    </div>
  </div>

  <!-- 所有内容块 -->
  <div class="row content-block" id="button-1">
    <div class="col span-1-of-2">
      <h2>Text Button-1</h2>
      <p>Some Text</p>
    </div>
  </div>
  <div class="row content-block" id="button-2" style="display:none;">
    <div class="col span-2-of-3">
      <h2>text Button-2</h2>
      <p>text</p>
    </div>
  </div>
  <div class="row content-block" id="button-3" style="display:none;">
    <div class="col span-2-of-2">
      <h2>text Button-3</h2>
      <p>text</p>
    </div>
  </div>
  <div class="row content-block" id="button-4" style="display:none;">
    <div class="col span-2-of-2">
      <h2>text Button-4</h2>
      <p>text</p>
    </div>
  </div>
</section>

步骤2：添加原生JS逻辑 #

获取所有按钮和内容块，给每个按钮绑定点击事件，点击时隐藏所有内容，显示目标内容：

// 获取页面上的所有按钮和内容块
const buttons = document.querySelectorAll('.btn-ghost');
const contentBlocks = document.querySelectorAll('.content-block');

// 遍历每个按钮，绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 阻止a标签默认的跳转行为（避免点击后跳转到页面顶部）
    e.preventDefault();
    // 获取当前按钮对应的目标内容ID
    const targetContentId = this.getAttribute('data-target');
    
    // 先隐藏所有内容块
    contentBlocks.forEach(block => {
      block.style.display = 'none';
    });
    
    // 显示目标内容块
    document.getElementById(targetContentId).style.display = 'block';
  });
});

方式二：原生JS + innerHTML动态插入内容 #

如果不想在HTML里写太多隐藏内容，可以把每个按钮对应的HTML存在JS对象里，点击时用innerHTML替换容器内容，更灵活。

步骤1：调整HTML结构 #

添加一个专门的内容容器，初始放入按钮1的内容：

<section class="section-web new-section__white section new_section" id="web">
  <div class="row web-btns">
    <div class="col span-2-of-2 ">
      <a class="btn btn-ghost" href="#" data-target="button-1">Button 1</a>
      <a class="btn btn-ghost" href="#" data-target="button-2">Button 2</a>
      <a class="btn btn-ghost" href="#" data-target="button-3">Button 3</a>
      <a class="btn btn-ghost" href="#" data-target="button-4">Button 4</a>
    </div>
  </div>

  <!-- 内容容器 -->
  <div id="content-container">
    <div class="row">
      <div class="col span-1-of-2">
        <h2>Text Button-1</h2>
        <p>Some Text</p>
      </div>
    </div>
  </div>
</section>

步骤2：添加原生JS逻辑 #

用模板字符串存储每个按钮的内容，点击时替换容器内容：

// 存储每个按钮对应的HTML内容（用模板字符串，换行和格式都能保留）
const contentTemplates = {
  'button-1': `
    <div class="row">
      <div class="col span-1-of-2">
        <h2>Text Button-1</h2>
        <p>Some Text</p>
      </div>
    </div>
  `,
  'button-2': `
    <div class="row">
      <div class="col span-2-of-3">
        <h2>text Button-2</h2>
        <p>text</p>
      </div>
    </div>
  `,
  'button-3': `
    <div class="row">
      <div class="col span-2-of-2">
        <h2>text Button-3</h2>
        <p>text</p>
      </div>
    </div>
  `,
  'button-4': `
    <div class="row">
      <div class="col span-2-of-2">
        <h2>text Button-4</h2>
        <p>text</p>
      </div>
    </div>
  `
};

// 获取内容容器和所有按钮
const contentContainer = document.getElementById('content-container');
const buttons = document.querySelectorAll('.btn-ghost');

// 绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    const targetKey = this.getAttribute('data-target');
    // 用innerHTML替换容器内容
    contentContainer.innerHTML = contentTemplates[targetKey];
  });
});

方式三：jQuery简化实现（适合快速开发） #

如果你习惯用jQuery，代码会更简洁，原理和上面的原生方案一致：

$(document).ready(function() {
  $('.btn-ghost').click(function(e) {
    e.preventDefault();
    // 获取目标内容ID
    const targetId = $(this).data('target');
    
    // 方案一：切换显隐
    $('.content-block').hide();
    $('#' + targetId).show();
    
    // 方案二：动态插入内容（和原生方式二对应）
    // const contentTemplates = {...}; // 同上面的对象
    // $('#content-container').html(contentTemplates[targetId]);
  });
});

给你的学习建议 #

• 如果你正在学习JavaScript，优先选原生方案一，它能帮你直观理解DOM元素的选择、事件绑定和样式操作；
• 记得测试每个按钮的点击效果，重点检查是否阻止了a标签的默认跳转（否则页面会滚动到顶部）；
• 可以尝试给按钮添加“激活状态”（比如点击后改变按钮样式），提升用户体验，这也是很好的JS练习。

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