JSFiddle - React, Tailwind, and code Playground

by SengKook Park

HTML

<ul>
    <li>About Animals
        <ul>
            <li>Mammal
                <ul>
                    <li>Cows</li>
                    <li>Donkeys</li>
                    <li>Dogs</li>
                    <li>Tigers</li>
                </ul>
            </li>   
            <li>Others
                <ul>
                    <li>Snakes</li>
                    <li>Birds</li>
                    <li>Lizards</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        About Fish
        <ul>
            <li>
                About aquarium fishes
                <ul>
                    <li>Guppy</li>
                    <li>Scalare</li>
                </ul>
            </li>
            <li>
                Sea fish
                <ul>
                    <li>Sea trout</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript

var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length&&lis[i]; i++) {
    var sublis = lis[i].getElementsByTagName("li");
    if(sublis.length>0) {
        var children = lis[i].childNodes;
        for(var j=0; j<children.length&&children[j]; j++) {
            if(j == 0) {
              children[j].nodeValue = children[j].nodeValue + "[" + sublis.length + "]";
            }
            
        }
    }
}