将元素按钮更改为图像

【问题标题】：Change element button to image将元素按钮更改为图像
【发布时间】：2021-11-05 03:29:44
【问题描述】：

我想问一下如何在点击时使用javascript将元素按钮更改为图像？例如，从提交按钮到选中的图像。

【问题讨论】：

【解决方案1】：

我用svg做demo，你可以改成<img src="https://some_picture">

var button = document.getElementsByTagName("button")[0];

button.addEventListener('click', function() {
  button.innerHTML  =`<svg width="50" height="50"></svg>`
});

&lt;button&gt;click&lt;/button&gt;

【讨论】：

【解决方案2】：

将click 事件侦听器添加到更改其outerHTML 属性的按钮：

btn.addEventListener('click', function(){
  this.outerHTML = `<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">`
})

&lt;button id="btn"&gt;Click&lt;/button&gt;

【讨论】：

【解决方案3】：

function myFunction() {
    document.getElementById("contentChange").innerHTML = "Hello World";
}

&lt;button id="contentChange" onclick="myFunction()"&gt;Click me&lt;/button&gt;

【讨论】：