本文介绍如何通过 DOM 操作，将按钮（button）元素中的纯文本（如 'Edit'）替换为图标图片，避免使用 textContent，转而动态创建并插入 <img> 元素。
本文介绍如何通过 dom 操作，将按钮（button）元素中的纯文本（如 `'edit'`）替换为图标图片，避免使用 `textcontent`，转而动态创建并插入 `` 元素。
在 JavaScript 中，textContent 仅用于设置或获取元素的纯文本内容，它会忽略所有 HTML 标签，因此无法渲染图片、图标或其他富媒体内容。若希望按钮内显示图像（例如编辑图标），必须采用 DOM 节点操作的方式：创建 <img> 元素，配置其 src 和语义化属性（如 alt），再将其作为子节点添加到按钮中。
以下是标准实现代码：
const editButton = document.createElement('button');
const editImage = document.createElement('img');
editImage.src = '/icons/edit.svg'; // 推荐使用相对路径或 CDN 地址
editImage.alt = 'Edit item'; // 必填：提升可访问性（a11y）
editImage.width = 16; // 可选：控制尺寸，避免布局偏移
editImage.height = 16;
editButton.appendChild(editImage);⚠️ 注意事项：
- 不要混用 textContent 和 appendChild：一旦调用 editButton.textContent = 'Edit'，后续 appendChild 仍可生效，但此前设置的文本会被清空；更稳妥的做法是全程避免 textContent，直接构建结构。
- 务必设置 alt 属性：这是无障碍访问（WCAG）的基本要求，屏幕阅读器依赖该属性描述图像功能。
- 考虑 SVG 图标或 CSS 背景图方案：若图标需响应式缩放或主题适配，推荐使用内联 SVG 或 background-image + ::before 伪元素（适用于静态样式场景）；但本例中动态创建 <img> 是最直接、语义清晰的 JS 方案。
- 添加点击行为时：可继续绑定事件监听器，例如 editButton.addEventListener('click', handleEdit)，与文本按钮完全兼容。
最终生成的 DOM 结构等效于：
立即学习“Java免费学习笔记（深入）”；
<button><img src="/icons/edit.svg" alt="Edit item" width="16" height="16"></button>
简洁、语义正确，且具备良好的可维护性与可访问性。
