内直接写合法有效，但需注意dom操作方式和可访问性：textcontent仅渲染纯文本，无法解析html；应使用appendchild()或可信源下的innerhtml；必须设置alt属性，推荐vertical-align: middle解决对齐问题。
button 标签内直接写 <img> 是合法且有效的，但必须注意 DOM 操作方式和可访问性细节——不能靠 textContent 插入 HTML 字符串，也不能忽略 alt 属性。
为什么 textContent = '<img src="icon.png">' 不显示图片
因为 textContent 只接受纯文本，浏览器会把整个字符串当作文本字面量渲染，不会解析成 DOM 节点。你看到的是一行原始 HTML 代码，而不是图像。
正确做法是用 appendChild() 或 innerHTML（后者需谨慎）插入真实元素：
-
innerHTML可用，但存在 XSS 风险，仅限完全可信的源（如本地静态路径） -
appendChild()更安全，推荐用于动态创建 - 若按钮内容固定，直接写 HTML 更简洁：
<button><img src="save.png" alt="保存"> 保存</button>
如何用 JavaScript 动态创建带 img 的 button
关键在于分步构造：先建 button，再建 img，最后挂载，并补全语义属性：
- 必须设置
img.alt，否则屏幕阅读器无法识别功能；空字符串alt=""仅适用于纯装饰性图标（此时建议加aria-hidden="true"） - 推荐给
img加width/height或 CSS 尺寸，避免布局抖动 - 若图标需响应 hover 状态（如变色），
<img>不支持伪类，应改用 SVG 或字体图标
示例：
const btn = document.createElement('button');
const icon = document.createElement('img');
icon.src = 'delete.svg';
icon.alt = '删除此项';
icon.width = 16;
icon.height = 16;
btn.appendChild(icon);
btn.append(' 删除'); // 注意：append() 可接文本或节点，textContent 会覆盖全部子节点
document.body.appendChild(btn);
用 <img> 嵌套时的常见样式问题
默认情况下，<img> 是 inline 元素，容易和文字基线不对齐，导致上下错位或额外空白：
- 加
vertical-align: middle是最简解法，适用于单行图文混排 - 若按钮内含多元素（图标+文字+分隔符），用
display: flex更可控 - 避免用
margin-top硬调位置——它依赖父容器 line-height，跨浏览器不一致 -
<button></button>默认有 padding 和 border，需重置或统一设计系统中定义
什么时候不该用 <img> 嵌套在 button 里
不是所有图标场景都适合 <img>：
- 需要根据主题切换颜色（如深色模式自动反色）→ 选内联
<svg></svg>，可直接用 CSS 控制fill - 图标数量多、需批量管理 → 用 Font Awesome 等字体图标，减少 HTTP 请求
- 按钮尺寸极小（如 24×24px 工具栏按钮）→ PNG 可能模糊，SVG 或字体更清晰
- 要支持动画（如加载旋转图标）→
<img>无法直接 CSS 动画，需换 SVG +@keyframes
真正要用 <img> 的典型场景，其实是已有现成 PNG/SVG 文件、且无需运行时干预样式的操作按钮，比如“导出 Excel”“打印”这类功能明确、图标固定的控件。
