JSFiddle - React, Tailwind, and code Playground

by Dima Polos

HTML

<div>
  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

JavaScript

var list = document.getElementById('list'); // Находим элемент по id
var length = (list.childNodes.length - 1) / 2; //Находим его длину, точнее кол-во узлов, НО, если посмотреть, то в список узлов входит как тег, так и текст внутри тега, так что реальное количество элементов li у нас в два раза меньше, а минус 1, потому что последнее поле объекта - это поле length. То есть, в этом примере li у нас 10, а длина элемента 21, потому что 10 li, 10 текстовых узлов и поле length
//console.log(list, length);

var container = document.createElement('div'); // Теперь создадим контейнер, куда хотим вывести результат
container.className = 'result result__container'; // Добавим в него класс, это необязательно, но чисто для информации, как это вообще делается
container.innerText = 'Length:' + length; // Зададим текст внутри контейнера, склеим, сконкатенируем, строку с текстом Length и переменной
var parentElem = document.body; // Сам контейнер в оперативке есть, но его теперь вывести бы, поэтому сначала найдем куда его добавить, вот в примере выбрал просто в body
parentElem.appendChild(container); // А тут просто передаю созданный жлемент в документ, причем appendChild добавляет в конец документа, если надо как-то по-другому - смотрите ссылку в моем первом ответе