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

Question

So I wanted to add items to a list by typing the items in an with a beside that returns the value, adds the value to the list. Which I have done... But I want to limit the amount of times I add items the list. Say I want to limit it to 5 times only. So I can basically add 5 items to a list... And that's all... Now...How do I do that?

Thx for response.

<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

You can get the number of children of a node:

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

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

Note that this counts all the child nodes not just li elements so if you have text nodes in there which I don't think you will they will be included in this count.