Lo puedes hacer de esta manera:
Modificando los atributos style
del elemento que quieras ocultar.
JavaScript:
function mostrar(id){
img=document.getElementById(id);
img.innerHTML='<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAYA8hTE0vOHlJm4y8DlUYvC9GTcKuJtwWze-7RtzNyb9SGi6JWnmeYgqAkHBVWflaDM&usqp=CAU">';
setTimeout(() => {
img.style.display = "none"
//imgHidde.style.visibility = "collapse"
//imgHidde.style.visibility = "hidden"
}, 4000);
}
Diferencias:
Creditos: Pekka
visibility:hidden
significa que, a diferencia de ella, la etiqueta
no es visible, pero se le asigna espacio en la página. La etiqueta se
representa, simplemente no se ve en la página.
display:none
significa que la etiqueta en cuestión no aparecerá en
la página en absoluto (aunque aún puede interactuar con ella a través
del DOM). No habrá espacio asignado para ello entre las otras
etiquetas.
visibility:collapse
Oculta un elemento por completo (para que no ocupe
ningún espacio en el diseño), pero solo cuando el elemento es un elemento de tabla.
HTML:
<button onClick="mostrar('imagen')" >Aceptar</button>
<div id='imagen'></div>
Alternativa para capturar el evento Click del botón:
HTML BOTON:
<button id="btnShowImage">Aceptar</button>
JS:
let imgHidde = document.getElementById('imagen')
let btn = document.getElementById('btnShowImage')
btn.addEventListener('click', () => {
imgHidde.innerHTML='<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAYA8hTE0vOHlJm4y8DlUYvC9GTcKuJtwWze-7RtzNyb9SGi6JWnmeYgqAkHBVWflaDM&usqp=CAU">';
})