应优先使用 document.createElement("button") 创建按钮，因其支持嵌套内容、天然可访问、属性行为一致；避免用 input type="button"，因其不支持子节点、textContent 无效且渲染异常。
用 document.createElement("button") 而不是 input
动态创建按钮，第一件事是选对元素类型：button 比 input type="button" 更可靠。前者支持嵌套内容（比如 <svg> 或图标文字混排），天然可访问，且 disabled、type 等属性行为一致；后者只能靠 value 显示纯文本，且在旧版 Safari 或某些 CSS 重置下 padding 渲染异常。
常见错误：写 document.createElement("input") 后只设 type = "button"，结果发现无法插入图标、textContent 不生效、或点击事件监听失败——因为 input 是自闭合标签，没子节点，也不响应 innerHTML。
- 正确做法：
const btn = document.createElement("button"); - 务必显式设置
btn.type = "button"，尤其当按钮可能被插入到<form>内，否则默认type="submit"可能意外触发表单提交 - 若需兼容极老环境（IE8–），才考虑降级用
input，但此时 JS 和 CSS 本身也大概率不兼容，不如统一升级方案
appendChild() 前必须确保父容器已存在
脚本执行时机错位，是“按钮创建了但看不到”的最常见原因。DOM 还没解析完，document.getElementById("container") 就返回 null，后续 appendChild() 直接报错并中断执行。
验证方法：在调用 appendChild() 前加一句 console.log(placeholder)，如果输出 null 或 undefined，说明目标容器还没加载。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：把 JS 放在
</body>之前；或包装进DOMContentLoaded事件：document.addEventListener("DOMContentLoaded", () => { /* 创建逻辑 */ }) - 避免用
document.write()或内联onclick驱动创建，这类写法不可控、难调试 - 若父容器是后来动态生成的（比如弹窗），得等它挂载完成再操作，不能仅靠 ID 查找就假设它“一定存在”
按钮文本、图标与状态属性要分场景设置
button 的内容写法和属性配置直接影响可维护性与可访问性。纯文本用 textContent，带 HTML 结构（如图标）用 innerHTML，但要注意 XSS 风险；状态控制优先走 disabled 属性而非仅靠 CSS 灰色样式。
- 设文字：
btn.textContent = "保存"（安全、无 HTML 解析）；设含图标的按钮：btn.innerHTML = '<svg>...</svg> 提交'（需确保 SVG 来源可信） - 禁用状态必须用
btn.disabled = true，而不是只加class="disabled"+opacity: 0.5—— 后者无法阻止键盘Enter触发，也不影响屏幕阅读器播报 - 需要语义化描述时（如图标按钮无文字），加
btn.setAttribute("aria-label", "删除此项")，别依赖 title 属性 - 避免直接操作
style属性做状态切换（如btn.style.backgroundColor = "red"），应通过增删 class 控制，方便复用和主题切换
事件绑定别漏掉 disabled 检查与防抖
动态创建的按钮，事件监听器虽然绑上了，但用户仍可能点不动——往往不是没绑定，而是点击瞬间按钮已被设为 disabled，或快速连点触发了竞态。
典型现象：点击后按钮变灰，但回调函数没执行；或首次点击有效，第二次就失效。
- 在事件处理函数开头加守卫：
if (this.disabled) return;，防止误触发 - 涉及异步操作（如发请求）时，点击后立即
this.disabled = true，成功/失败后再恢复，别依赖定时器硬等 - 不用
onclick行内写法，它无法动态解绑，且多个同名事件会覆盖；坚持用addEventListener，方便后期removeEventListener或批量管理 - 移动端注意：
click有约 300ms 延迟，如需即时反馈（如开关按钮），可监听touchstart并同时兼容click，但别忘了preventDefault()防止双触发
真实项目里最容易被忽略的，是 disabled 属性的布尔语义——只要存在该属性（哪怕写成 disabled="false"），按钮就不可交互。它不看值，只看有没有。
