将 <li> 添加到 <ul> 并限制（纯 JS）

Question

所以我想通过在 returns 值旁边键入项目来将项目添加到列表中，将值添加到列表中。我已经完成了......但是我想限制我在列表中添加项目的次数。假设我只想将它限制为 5 次。所以我基本上可以将 5 项添加到列表中......仅此而已......现在......我该怎么做？

感谢回复。

<script type="text/javascript">         
    var input = document.getElementById('username');

    function checkLength() {
        var node = document.createElement('li');
        var nodeText = document.createTextNode(input.value);
        var ul = document.getElementsByTagName('ul')[0];

        node.appendChild(nodeText);
        ul.appendChild(node);
        input.value = "";
        node.setAttribute('style', "color:green; text-transform:uppercase;");
    }
}
</script>

Answer 1

您可以获取一个节点的子节点数：

var ul = document.getElementsByTagName('ul')[0];

if (ul.childNodes.length < 5) {
  ul.appendChild(node);
}

请注意，这计算了所有子节点，而不仅仅是 li 元素，因此如果您在其中有文本节点，我认为您不会将它们包含在该计数中。

将 <li> 添加到 <ul> 并限制（纯 JS）

Adding <li> to <ul> with limit (pure JS)

javascript

list

set

limit