最稳妥方式是用textContent属性修改button文字，因其行为稳定、不触发重排、语义清晰；button双标签需改内容体而非value，框架内应走数据绑定而非直接DOM操作。
button 元素点击后改自身文字，用 textContent 不要用 innerText
直接改按钮自己的文字，最稳妥的方式是操作 textContent 属性。虽然很多教程写 innerText，但它有隐性坑：在某些浏览器里会触发重排（reflow），且对空格、换行的处理不一致；textContent 行为稳定、语义清晰、性能更好。
常见错误是误用 innerHTML —— 如果按钮里只有纯文本，用 innerHTML 没问题，但一旦里面嵌了 <span> 或图标，innerHTML = '新文字' 会把子节点全清掉。
-
button是双标签，文字写在标签体内，所以必须用textContent或innerHTML修改内容体，不能靠value属性 -
input[type="button"]或input[type="submit"]才用value属性改文字 - 如果按钮绑了事件监听器（比如
addEventListener），用this.textContent = '已点击'最直接
onclick="xxx()" 里怎么写才能正确改自身文字
内联事件处理器里，this 指向当前按钮元素，可以直接用。但注意：不能写成 this.value = 'xxx'，因为 button 没有 value 属性（只对 input 有效）。
示例代码：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<button onclick="this.textContent='已提交'">提交</button>
如果需要切换状态（比如“点赞/取消”），就得加判断逻辑：
<button onclick="this.textContent = this.textContent === '点赞' ? '已赞' : '点赞'">点赞</button>
- 这种写法简洁，适合简单场景；复杂逻辑建议抽到外部函数里
- 避免在内联中写多行 JS，可读性差且调试困难
- 如果按钮用了 CSS 类或图标（如
<button><i class="icon"></i> 点赞</button>），直接赋值会删掉<i>，此时应只改文本节点或用innerText（但依然不如textContent可控）
为什么 innerText 在某些情况下会失效或行为异常
innerText 的设计初衷是模拟用户看到的“渲染后文本”，所以它会受 CSS 样式影响：比如 display: none 或 visibility: hidden 的子元素，它的文本不会被包含；还可能因字体、行高计算导致异步延迟返回值。这些都不是你改按钮文字时想要的副作用。
-
innerText在 Firefox 中曾长期不支持设置操作（只读），虽然后来补上了，但兼容性仍弱于textContent -
innerText会自动过滤不可见空白符，而textContent保留原始 DOM 结构中的空白 - 如果你只是想替换按钮上那一段可见文字，
textContent更接近“所见即所得”的直觉
框架环境下（Vue/React）别硬改 DOM
如果按钮在 Vue 或 React 组件里，直接操作 this.textContent 或 document.getElementById(...).textContent 很可能被下一次响应式更新覆盖——框架会按数据状态重新渲染整个节点。
- Vue：用
v-bind或:text绑定按钮文字，点击时改 data 或 ref - React：用
useState管理按钮文案，点击时setButtonText('已点击') - 强行绕过框架直接改 DOM，短期有效，长期维护成本高，也容易和 SSR 渲染冲突
真正要动手改文字前，先确认按钮是不是框架接管的节点——查一下开发者工具里元素上有没有 data-v-xxx 或 __reactFiber$ 这类标记。
