如何在 li 元素上添加带有 href 的元素？

Question

我的网站上有一个搜索系统，它可以工作，但我无法点击我搜索的项目。它是一个简单的脚本，可以创建依赖于我的搜索输入的 li 元素，但我如何才能将这些元素添加到自定义链接中？因为如果你不能点击你搜索的项目那没有任何意义......我想添加这个常量人物元素自定义链接。代码：const people = [{name:'გადაარჩინე დედამიწა'},{name:'ანტიმელა'},{name:'mr.capsule'},{name:'capsule battle royale'}];const list = document.getElementById('list');function setlist (group) {    clearlist();    for (const person of group) {        const item = document.createElement("li");        item.classList.add("list-group-item");        const text = document.createTextNode(person.name);        item.appendChild(text);        list.appendChild(item);    }    if (group.length === 0) {        setnoresults();    }}function clearlist () {while (list.firstChild) {list.removeChild(list.firstChild);}}function getrelevency (value, searchTerm) {    if (value === searchTerm) {        return 2;    }else if (value.startsWith(searchTerm)) {        return 1;    }else if (value.includes(searchTerm)) {        return 0;    }}function setnoresults () {const item = document.createElement('li');        item.classList.add('list-group-item');        const text = document.createTextNode('შედეგები ვერ მოიძებნა... სცადეთ თავიდან');        item.appendChild(text);        list.appendChild(item);}const searchInput = document.getElementById('search');    searchInput.addEventListener('input', (event) => {         let value = event.target.value;        if (value && value.trim().length > 0) {            value = value.trim().toLowerCase();            setlist(people.filter(person => {                return person.name.includes(value);            }).sort((personA, personB) => {                return getrelevency(personB.name, value) - getrelevency(personA.name, value);            }));        }else {            clearlist();        }    });

Answer 1

你应该在函数中添加它setlist。

function setlist (group) {

    clearlist();

    for (const person of group) {

        const item = document.createElement("li");

        item.classList.add("list-group-item");

        const link = document.createElement("a");

        link.href = "http://..."; // put here where the link should point

        item.appendChild(link);

        const text = document.createTextNode(person.name);

        link.appendChild(text);

        list.appendChild(item);

    }

    if (group.length === 0) {

        setnoresults();

    }

}

Answer 2

我通过这种方式获得了解决方案，检查搜索输入是什么，如果是目标搜索，它将在自定义搜索上添加一个链接。如果陈述者正在做一切！

function setlist (group) {

    clearlist();

    for (const person of group) {

        const item = document.createElement("li");

        item.classList.add("list-group-item");

        if (person.name === "გადაარჩინე დედამიწა") {

          const link = document.createElement("a");

        link.href = "https://google.com"; // put here where the link should point

        link.text = "გადაარჩინე დედამიწა"

        item.appendChild(link);

    }

        const text = document.createTextNode(person.name);

        item.appendChild(text);

        list.appendChild(item);

    }

    if (group.length === 0) {

        setnoresults();

    }

}