纯JS实现向<ul>添加<li>并限制添加数量

嘿，这个需求很容易搞定！我们只需要在添加新的<li>之前，先检查当前列表里已有的项目数量，只要数量小于5才继续执行添加逻辑，超过上限就给用户一个提示就行啦。

修改后的完整代码 #

<script type="text/javascript">
  var input = document.getElementById('username');
  function checkLength() {
    // 获取目标ul元素
    var ul = document.getElementsByTagName('ul')[0];
    // 统计当前已有的li数量
    var liCount = ul.getElementsByTagName('li').length;
    
    // 判断是否达到最大添加限制
    if (liCount >= 5) {
      alert('最多只能添加5个项目哦！');
      return; // 终止函数，不再执行后续添加操作
    }
    
    // 以下是你原本的添加逻辑
    var node = document.createElement('li');
    var nodeText = document.createTextNode(input.value);
    node.appendChild(nodeText);
    ul.appendChild(node);
    input.value = "";
    node.setAttribute('style', "color:green; text-transform:uppercase;");
  }
</script>

关键改动说明 #

• 数量检查逻辑：通过ul.getElementsByTagName('li').length获取当前列表中已有的<li>元素数量，判断是否达到5个上限。
• 终止执行：当数量超过或等于5时，弹出提示并通过return终止函数，避免继续添加新元素。
• 修复语法问题：移除了你原代码中多余的闭合大括号（最后多了一个}），避免出现语法错误。

如果你觉得弹窗提示不够友好，也可以换成页面内的文字提示（比如在输入框下方显示提示文本），核心的数量判断逻辑是一样的~

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