调用函数后保持 Javascript 不变

Question

我正在尝试创建一个动态列表，因此当用户执行搜索时，它将重新填充该列表。问题是我似乎无法创建一个不可变的常量来存储原始 div 内容。每次调用函数 get 时，此变量都会重新初始化。

有没有办法在不使用 cookie 的情况下实现这一点？真诚感谢任何帮助。代码不完整，因为我无法通过此步骤，但如果您认为我完全朝着错误的方向前进，请告诉我。

const originalList = document.getElementById('patientList').getElementsByTagName('li'); freeze = Object.freeze(originalList);

  <script>
    const originalList = document.getElementById('patientList').getElementsByTagName('li');
    frozen = Object.freeze(originalList);
    var newList = '';
    var found = false;
    function filterPatients(){
        var searchQuery = document.getElementById('search');
        var query = searchQuery.value;
        var listContainer = document.getElementById('patientList');
        var patientList = listContainer.getElementsByTagName('li');
        for (var i = 0; i < originalList.length; i++){
            var link = patientList[i].getElementsByTagName('a');
            var link = link[0].text;
            /** remove whitespaces for easy comparison **/
            link = link.toLowerCase();
            query = query.toLowerCase();
            link = link.replace(/\s/g, "");
            query = query.replace(/\s/g, "");

            /** check every character in query **/
                if (link.length > query.length && link.substring(0,query.length) == query){
                    found = true;
                    newList += '<li>' + patientList[i].innerHTML + '</li>';
                }
        }
        if (found == true){
            listContainer.innerHTML = newList;
            newList = '';
        }
        else{
            listContainer.innerHTML = "<li>No patient by that name</li>";
        }
        console.log(frozen);

    }

</script>

Answer 1

const originalList = document.getElementById('patientList').getElementsByTagName('li').cloneNode(true);

使 originalList 成为元素的副本。目前，您将 originalList 和 patientList 设置为相同的元素列表，因此更改一个也会更改另一个。使用 element.cloneNode(true) 对 DOM 元素进行深拷贝