JavaScript追加列表项前检查元素是否存在的实现与代码纠错

原有代码的核心问题 #

你写的代码存在几处语法和逻辑错误，是导致功能异常的原因：

• 拼写错误：遍历列表项时写的listItem.lenght是错误拼写，正确属性名是length
• 运算符错误：判断相等时用了赋值运算符=，应该用严格相等运算符===；且直接拿DOM元素和输入的字符串比对是无效的，需要读取<li>标签内的文本内容
• 逻辑顺序错误：新增列表项的逻辑写在了for循环的else分支里，会出现只要遍历到第一个不匹配的项就直接插入新值的问题，根本没有完成全量重复校验
• 细节缺失：没有处理输入值前后的空格、大小写差异，会出现输入"mangoes"和现有"Mangoes"判定为不重复的bug，也没有闭合所有代码块的大括号
• 注释语法错误：多余的注释闭合符*/会导致脚本解析异常

最佳实现思路 #

• 输入预处理：先对用户输入的值做trim()处理，去掉首尾多余空格，再做空值校验
• 统一比对规则：把现有列表项的文本和用户输入都统一转成小写（或大写）后再比对，规避大小写带来的判断误差
• 全量校验后再操作：遍历完所有现有列表项，确认没有重复值之后，再执行DOM插入操作
• 体验优化：插入成功后清空输入框，方便用户下次输入

修正后可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Add new fruits</title>
</head>
<body>
    <div>
        <p>Enter a fruit to add to the list</p>
        <input type="text" id="fruit" />
        <button onclick="prependContent()">Add to List</button>
    </div>
    <ul id="list">
        <li>Mangoes</li>
        <li>Bananas</li>
        <li>Oranges</li>
    </ul>

    <script>
        function prependContent() {
            // 获取输入值并预处理：去首尾空格
            const inputVal = document.getElementById("fruit").value.trim();
            const list = document.getElementById("list");
            const listItems = list.getElementsByTagName("li");

            // 空值校验
            if (!inputVal) {
                alert("请输入水果名称");
                return false;
            }

            // 全量遍历检查重复
            let isExist = false;
            for (let i = 0; i < listItems.length; i++) {
                // 取现有项文本，去空格转小写后和输入值比对
                const existFruit = listItems[i].textContent.trim().toLowerCase();
                if (existFruit === inputVal.toLowerCase()) {
                    isExist = true;
                    break;
                }
            }

            if (isExist) {
                alert("该水果已经在列表中");
                return false;
            }

            // 校验通过才新增节点
            const li = document.createElement("li");
            li.textContent = inputVal;
            list.prepend(li);

            // 新增后清空输入框
            document.getElementById("fruit").value = "";
        }
    </script>
</body>
</html>

提示：如果列表项量级很大，也可以先把现有列表项的值存到Set结构里做存在性判断，时间复杂度比遍历数组更低，性能更好，小数据量场景下普通遍历完全够用。

内容的提问来源于stack exchange，提问作者Skynet