Добавление <li>к <ul>с ограничением (чистый JS)

Question

Итак, я хотел добавить элементы в список, набрав элементы в поле рядом с, которое возвращает значение, добавляет значение в список.Что я и сделал ... Но я хочу ограничить количество раз, когда я добавляю элементы в список.Скажем, я хочу ограничить его только 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, поэтому, если у вас есть текстовые узлы, которые я не могудумаю, что они будут включены в этот счет.