如何通过按钮修改HTML中Div文本的最佳实践

推荐方案：数据驱动的原生JS实现 #

这种方式完全解耦HTML结构和文本内容，新增按钮无需修改JS逻辑，还能轻松适配后续翻译需求。

实现步骤： #

1. HTML结构：给每个按钮添加data-text-key属性，用来关联对应的文本标识

<div id="target-text">默认显示文本</div>

<button class="text-updater" data-text-key="btn1">按钮1</button>
<button class="text-updater" data-text-key="btn2">按钮2</button>
<!-- 新增按钮直接复制上面的结构，修改data-text-key和按钮文字即可 -->

2. JS逻辑：用一个配置对象存储所有文本内容，统一绑定点击事件

// 文本配置，后续翻译时可以单独抽成JSON文件（如zh-CN.json、en-US.json）
const textContentMap = {
  btn1: "按钮1点击后显示的文本内容",
  btn2: "按钮2对应的较长文本，不用写在HTML的onclick里，避免冗余",
  // 新增按钮的文本直接在这里添加键值对
};

// 给所有按钮绑定点击事件，一次绑定永久生效
document.querySelectorAll('.text-updater').forEach(button => {
  button.addEventListener('click', function() {
    const textKey = this.dataset.textKey;
    document.getElementById('target-text').textContent = textContentMap[textKey] || '';
  });
});

jQuery版本的改进方案 #

如果你仍想用jQuery，同样可以用数据属性优化，避免判断类名的冗余逻辑：

const textContentMap = {
  btn1: "按钮1文本",
  btn2: "按钮2文本"
};

$('.text-updater').on('click', function() {
  const textKey = $(this).data('text-key');
  $('#target-text').text(textContentMap[textKey] || '');
});

CSS方案的局限性 #

CSS本身无法处理动态交互逻辑，只能通过隐藏的单选框+兄弟选择器模拟，但扩展性极差，不推荐用于你的场景：

<div id="target-text"></div>
<input type="radio" name="text-switch" id="btn1" hidden>
<label for="btn1">按钮1</label>
<input type="radio" name="text-switch" id="btn2" hidden>
<label for="btn2">按钮2</label>

<style>
#target-text::after {
  content: "默认文本";
}
#btn1:checked ~ #target-text::after {
  content: "按钮1文本";
}
#btn2:checked ~ #target-text::after {
  content: "按钮2文本";
}
</style>

问题说明：新增按钮必须新增对应的CSS规则，长文本写在content里非常麻烦，也无法适配翻译需求，仅适合极简单的静态文本切换场景。

翻译友好的进阶处理 #

把textContentMap抽成独立的JSON语言包，比如：

• zh-CN.json

{
  "btn1": "按钮1文本",
  "btn2": "按钮2文本"
}

• en-US.json

{
  "btn1": "Button 1 Text",
  "btn2": "Button 2 Text"
}

然后通过JS根据当前语言加载对应的JSON文件，这样维护翻译完全不需要修改业务代码，只需要更新语言包即可。

内容的提问来源于stack exchange，提问作者Célian CREPIN