JSFiddle - React, Tailwind, and code Playground

HTML

<div id="count"></div>

<ul>
    <li>An element...</li>
        <li>An element...</li>
</ul>
<ul>
    <li>An element...</li>
        <li>An element...</li>
</ul>

<a href="#" onclick="test.addElement();">Add Element</a>

JavaScript

var test = {};
    
    // Update count of elements
    test.updateCount = function(){
        var els = 0;
        for(var i=0;i < test.ul[0].getElementsByTagName('li').length;i++){
            els++;   
        }
        test.count.innerHTML = "ul > li: <b>#"+els+"</b> elem(s)";
        setTimeout(function(){ test.updateCount(); }, 100);
    };
    
    // Add new element
    test.addElement = function(){
       var li = document.createElement('li');
       li.innerHTML = "Another element...";
       test.ul[0].appendChild(li);
    };
    
    // Setup variables
    test.count = document.getElementById('count');
    test.ul = document.getElementsByTagName('ul');
    
    // Expose to window
    window.test = test;
    
    // Run
    test.updateCount();