Quiero devolver los datos que coincidan solo con el valor de entrada.
Pero en este código, el resultado se agregará después de los datos.
Estoy atascado en list.append(div);
const list = document.querySelector(".list"); const filterInput = document.querySelector("#filter-input"); const data = [{name: "abc"}, {name: "adb"}, {name: "cab"}]; renderData(data) function renderData(data) { data.forEach(item => { const div = document.createElement("div"); div.setAttribute("class", "item"); div.innerHTML = `<div class="name">${item.name}</div>`; list.append(div); }) } filterInput.addEventListener("input", e => { const keyword = e.target.value; let filteredData = data.filter(item => { return item.name.includes(keyword); }); renderData(filteredData); }) <input type="text" id="filter-input"> <div class="list"></div>Borre el innerHTML de la lista al renderizar para eliminar los elementos agregados previamente:
const list = document.querySelector(".list"); const filterInput = document.querySelector("#filter-input"); const data = [{name: "abc"}, {name: "adb"}, {name: "cab"}]; renderData(data) function renderData(data) { list.innerHTML = ""; //<-- clear innerHTML, remove appended elements data.forEach(item => { const div = document.createElement("div"); div.setAttribute("class", "item"); div.innerHTML = `<div class="name">${item.name}</div>`; list.append(div); }) } filterInput.addEventListener("input", e => { const keyword = e.target.value; let filteredData = data.filter(item => { return item.name.includes(keyword); }); renderData(filteredData); }) <input type="text" id="filter-input"> <div class="list"></div>