应优先使用 document.createelement("button") 创建按钮，因其支持嵌套内容、天然可访问、属性行为一致；避免用 input type="button"，因其不支持子节点、textcontent 无效且渲染异常。
用 document.createElement("button") 而不是 input
动态创建按钮，第一件事是选对元素类型：button 比 input type="button" 更可靠。前者支持嵌套内容（比如 <svg></svg> 或图标文字混排），天然可访问，且 disabled、type 等属性行为一致；后者只能靠 value 显示纯文本，且在旧版 Safari 或某些 CSS 重置下 padding 渲染异常。
常见错误：写 document.createElement("input") 后只设 type = "button"，结果发现无法插入图标、textContent 不生效、或点击事件监听失败——因为 input 是自闭合标签，没子节点，也不响应 innerHTML。
- 正确做法：
const btn = document.createElement("button"); - 务必显式设置
btn.type = "button"，尤其当按钮可能被插入到<form></form>内，否则默认type="submit"可能意外触发表单提交 - 若需兼容极老环境（IE8–），才考虑降级用
input，但此时 JS 和 CSS 本身也大概率不兼容，不如统一升级方案
appendChild() 前必须确保父容器已存在
脚本执行时机错位，是“按钮创建了但看不到”的最常见原因。DOM 还没解析完，document.getElementById("container") 就返回 null，后续 appendChild() 直接报错并中断执行。
验证方法：在调用 appendChild() 前加一句 console.log(placeholder)，如果输出 null 或 undefined，说明目标容器还没加载。
- 稳妥做法：把 JS 放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
