最稳妥方式是用textcontent属性修改button文字，因其行为稳定、不触发重排、语义清晰；button双标签需改内容体而非value，框架内应走数据绑定而非直接dom操作。

button 元素点击后改自身文字，用 textContent 不要用 innerText

直接改按钮自己的文字，最稳妥的方式是操作 textContent 属性。虽然很多教程写 innerText，但它有隐性坑：在某些浏览器里会触发重排（reflow），且对空格、换行的处理不一致；textContent 行为稳定、语义清晰、性能更好。

常见错误是误用 innerHTML —— 如果按钮里只有纯文本，用 innerHTML 没问题，但一旦里面嵌了 <span></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 有效）。

示例代码：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

 <button onclick="this.textContent='已提交'">提交</button> 

如果需要切换状态（比如“点赞/取消”），就得加判断逻辑：

 <button onclick="this.textContent = this.textContent === '点赞' ? '已赞' : '点赞'">点赞</button> 

• 这种写法简洁，适合简单场景；复杂逻辑建议抽到外部函数里
• 避免在内联中写多行 JS，可读性差且调试困难
• 如果按钮用了 CSS 类或图标（如 <button><i class="icon"></i> 点赞</button>），直接赋值会删掉 <i></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$ 这类标记。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！