Saludos, estoy creando un botón que muestre una carta aleatoria en Javascript, pero quiero saber cómo puedo reemplazar una carta nueva por la que tenía anteriormente en el div de salida ya que al activar el botón, se crea la nueva debajo de la anterior. Adjunto código y agradezco de antemano las respuestas.
<button onclick="sacar();">Sacar carta</button>
<div id="cartaOutput">
Aquí va la imagen de la carta
</div>
<input type="hidden" id="cartaHidden"/> <!--En este input va un valor que es con el que mando llamar a la carta-->
Ahora va el Javascript
function sacar()
{
document.getElementById("cartaHidden").value = Math.floor((Math.random()*42)+1); //Genero el número aleatorio
var carta=document.getElementById("cartaHidden").value; //Esto me permite pasar el valor del número random a una variable
var cartaOutput=document.getElementById("cartaOutput");
var salida=document.createElement("IMG");
salida.setAttribute("src", ""+carta+".png");
cartaOutput.appendChild(salida); //Aquí muestro la imagen
}