No estoy seguro de haber entendido su pregunta correctamente, pero por lo que tengo, desea editar solo los datos en la búsqueda, no es necesario crear un botón y un oyente cada vez. Coloque la búsqueda dentro de una función dedicada que se llama al hacer clic en el botón en la búsqueda, simplemente edite el valor.

puedes envolverlo todo en una función y llamarlo así

 const fakeApi = () => new Promise(resolve => setTimeout(() => resolve({ value: Math.floor(Math.random() * 100) }), 500)) const getData = () => fakeApi().then(randomProduct => { document.querySelector('#main').innerHTML = ` <span>${randomProduct.value}</span> <button id="refresh-button" type="button" onclick="getData()">Refresh</button>` }) getData()

 <div id="main"></div>

primero necesita un botón para realizar la solicitud de recuperación

 const fetchDataBtn = document.querySelector('#fetchdata') const result = document.querySelector('#result') // gets data from API and sets the content of #result div const getData = function() { result.innerText = 'Loading....' fetch('https://dummyjson.com/products') .then(res => res.json()) .then(data => { result.innerText = JSON.stringify(data, null, 2) }) .catch(error => console.log(error)) } // add event listener for #fetchdata button fetchDataBtn.addEventListener('click', getData) 

 const fetchDataBtn = document.querySelector('#fetchdata') const result = document.querySelector('#result') // gets data from API and sets the content of #result div const getData = function() { result.innerText = 'Loading....' fetch('https://dummyjson.com/products') .then(res => res.json()) .then(data => { result.innerText = JSON.stringify(data, null, 2) }) .catch(error => console.log(error)) } // add event listener for #fetchdata button fetchDataBtn.addEventListener('click', getData)

 <button id="fetchdata">FETCH</button> <div id="result"></div>