Mi proyecto utiliza la API de Giphy, consiste en realizar una búsqueda mediante un input y mostrar los resultados de gifs mediante DOM en el index. Cuando quiero realizar otra búsqueda, la anterior no se borra y la nueva se suma. Cómo puedo solucionar esto?
Dejo mi código:
window.onload = function () {
let buscarBtn = document.querySelector(".search-button");
buscarBtn.addEventListener("click", () => {
function accederABusquedas() {
const apiKey = "XXX-XXX-XXX-XXX";
const search = document.getElementById("searchinput").value;
console.log(search);
fetch(
"http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=" + apiKey
)
.then((response) => response.json())
.then((gif) => {
buscarGifs(gif);
});
}
accederABusquedas();
});
function buscarGifs(gif) {
for (let index = 0; index < gif.data.length; index++) {
let cont = document.createElement("div");
let search = document.getElementById("container-search");
let trend = document.getElementById("container-trending");
search.appendChild(cont);
var img = document.createElement("img");
cont.appendChild(img);
var url = gif.data[index].images.downsized.url;
img.setAttribute("src", url);
img.setAttribute("width", "298px");
img.setAttribute("height", "288px");
trend.style.display = "none";
}
}
};