Ya he visto un par de las mismas preguntas, pero parece que no puedo hacerlo bien. Quiero generar un nuevo GIF con un clic de botón. Llegué a generar un GIF con un clic de botón. El problema es que cuando vuelvo a hacer clic en el botón, agrega otro GIF en lugar de reemplazar el anterior.

Este es el código que tengo ahora:

Botón HTML

 <form> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg" type="button" id="btnGIF" style="display: inline; transition: all 0.15s ease 0s; text-align: center; width: 50%; z-index:1; position: relative; padding: 3%;">Generate GIF </button> </form>

Y este es el código JavaScript que tengo:

 document.addEventListener("DOMContentLoaded", init); function init() { document.getElementById("btnGIF").addEventListener("click", ev => { let APIKEY = "Dsuxat5V1ccrtvIIBdrxk731WPrSs22l"; let RandomNumber = Math.floor(Math.random() * (100 - 1) + 1); ev.preventDefault(); let url = `https://api.giphy.com/v1/gifs/search?api_key=${APIKEY}&limit=100&q=thankyou&offset=${RandomNumber}`; console.log(APIKEY) console.log(url); //var image_x = document.getElementsByClassName('out').classList.length; //console.log(image_x); //if (image_x > 0){ // PrevImage = document.getElementsByClassName('out') // PrevImage[0].parentNode.removeChild(PrevImage[0]); // } fetch(url) .then(response => response.json()) .then(content => { console.log(content.data); console.log('META', content.meta); let fig = document.createElement("figure"); let img = document.createElement("img"); img.src = content.data[0].images.downsized.url; img.alt = content.data[0].title; fig.appendChild(img); let out = document.querySelector(".out"); out.insertAdjacentElement("afterbegin", fig); }) .catch(err => { console.error(err); }) }); }

Veo que estoy agregando el nuevo gif en lugar de reemplazarlo. Simplemente no puedo encontrar una manera de reemplazarlo (acabo de comenzar a aprender JavaScript).

¿Alguien podría ayudarme?