如何在TypeScript中创建包含图标与文字的按钮？

我来帮你搞定这个问题～你之前踩的坑其实是个很常见的小细节：textContent会直接替换掉元素内所有已有的子节点，所以你先append了图标，再给按钮设置textContent的时候，图标就被覆盖没了。下面给你几个更靠谱的解决方案：

方案1：用insertAdjacentText直接加文字（最简洁） #

这个方法完全不会影响按钮里已有的内容，直接在指定位置插入文本，完美适配你的需求：

const btn = document.createElement("button");
const img = document.createElement("img");
// 这里提一句，你原代码里的`${favicon.png}`应该是笔误吧？如果favicon是存文件名的变量，应该写成`img/${favicon}.png`哦
img.src = "img/favicon.png";
img.alt = "按钮图标"; // 别忘了加alt属性，提升页面可访问性
btn.appendChild(img);

// 在按钮内部的末尾插入文字，不会动到已经添加的图标
btn.insertAdjacentText('beforeend', label);

方案2：用span包裹文字（适合需要单独样式的场景） #

如果你需要给按钮文字单独设置样式，用span是个好选择，还能解决你之前提到的“其他问题”（大概率是图标和文字的布局间距问题）：

const btn = document.createElement("button");
const img = document.createElement("img");
img.src = "img/favicon.png";
img.alt = "按钮图标";
btn.appendChild(img);

const textSpan = document.createElement("span");
textSpan.textContent = label;
// 给span加个类名，方便后续写CSS调整样式
textSpan.classList.add("btn-text");
btn.appendChild(textSpan);

要是图标和文字挤在一起，加几行CSS就能轻松调整：

button .btn-text {
  margin-left: 8px; /* 根据你的需求调整间距大小 */
}

方案3：用innerHTML（谨慎使用） #

如果你的按钮内容是固定的、不存在用户输入的风险，可以直接用innerHTML一次性拼接内容，写法更省心：

const btn = document.createElement("button");
btn.innerHTML = `<img src="img/favicon.png" alt="按钮图标" width="30" height="30"> ${label}`;

⚠️ 重要提醒：如果label是用户输入的内容，绝对不要用这个方法，会有XSS攻击的风险！

总结一下，方案1是最推荐的，简单直接，不需要额外元素，也不会出现覆盖图标的问题。

备注：内容来源于stack exchange，提问作者Manfred Schneider