如何在按钮点击时向按钮中添加图片与文本？

你用的<input type="button">只能设置纯文本内容，没法直接插入图片。要实现这个需求，得换成<button>标签，它允许在内部嵌套图片、文本等HTML元素。

修改后的完整代码 #

HTML部分

<button onclick="change()" id="pay-btn">Click here to check</button>

JavaScript部分

function change() {
  const btn = document.getElementById("pay-btn");
  // 替换按钮内部内容，插入加载图片和提示文本
  btn.innerHTML = `<img src="https://i.sstatic.net/kOnzy.gif" alt="加载中" style="width:20px; height:20px; vertical-align: middle;"> please wait...`;
  // 可选：禁用按钮防止重复点击
  btn.disabled = true;
}

关键说明 #

• <button>元素支持innerHTML属性，能直接修改内部的HTML结构，实现图片+文本的组合显示
• 给图片添加style属性是为了控制尺寸，同时用vertical-align: middle让图片和文字垂直对齐，避免排版错乱
• 加上btn.disabled = true可以防止用户重复点击按钮，优化交互体验

内容的提问来源于stack exchange，提问作者Bezos