button文本写在标签之间，input[type="submit"]用value属性；动态修改需区分节点类型，优先用textContent或value；伪元素覆盖不推荐，框架中应走数据绑定而非直接操作DOM。
button 标签的文本直接写在起止标签之间
HTML 中 <button> 是双标签，它的显示文字不是靠属性控制的，而是写在 <button> 和 </button> 之间的内容。改文字最简单、最可靠的方式就是改中间那段文本。
- ✅ 正确：
<button type="submit">立即下单</button> - ❌ 错误：
<button type="submit" value="立即下单"></button>（value属性对<button>无效，只影响<input type="button">） - ⚠️ 注意：如果用了
innerHTML或 JS 动态修改，也要确保替换的是标签内文本节点，而不是误删了子元素（比如里面嵌了<span>或图标）
input type="submit" 的文本用 value 属性改
如果你用的是 <input type="submit">，那文本必须通过 value 属性设置，它没有闭合标签，不能写内容体。
- ✅ 正确：
<input type="submit" value="登录"> - ❌ 错误：
<input type="submit">登录</input>（语法非法，浏览器会忽略闭合标签和其中内容） - ⚠️ 注意：
value值会作为表单提交数据的一部分（键名为name对应的值），如果不需要提交，建议改用<button>，语义更清晰且更可控
用 CSS 伪元素覆盖文字（不推荐但有时不得不做）
极少数场景下，比如设计稿要求按钮文字是图标+固定文案，且不允许改 HTML 结构，才考虑用 ::before 或 ::after 覆盖。但这会破坏可访问性，屏幕阅读器可能读不到真实文案。
- ✅ 可临时应急：
button { position: relative; } button::after { content: "确认提交"; position: absolute; left: 0; top: 0; } - ❌ 避免直接隐藏原文字：
text-indent: -9999px或font-size: 0会让辅助技术失效 - ⚠️ 兼容性没问题，但语义断裂——按钮的可点击区域和实际播报内容脱节，测试时容易漏掉
JS 动态改文字要区分 button 和 input
运行时修改，得先判断 DOM 节点类型，因为 textContent 和 value 的作用对象不同。
立即学习“前端免费学习笔记（深入）”；
document.querySelector('button').textContent = '已提交';document.querySelector('input[type="submit"]').value = '已提交';- ⚠️ 容易踩坑：用
innerText替代textContent可能触发重排；用innerHTML插入带 HTML 的字符串有 XSS 风险，纯文本就用textContent - ⚠️ 更隐蔽的坑：如果按钮被 Vue/React 等框架接管，直接操作 DOM 可能被下次渲染覆盖，优先走框架的数据绑定逻辑
<button> 和 <input type="submit">、忽略可访问性、或在框架里硬改 DOM，这几个地方最容易出问题。改之前先看一眼元素实际类型，比猜快得多。 
