Показ массива

Настоящие приложения обычно хранят данные в массиве, а страница показывает то, что лежит в массиве. Это та же идея, что и в счётчике: число жило в переменной, а страница его только показывала. Здесь пункты живут в массиве, а функция рисует их на странице:

const fruits = ["Яблоко", "Груша"];
const fruitList = document.querySelector("#fruits");

function showFruits() {
    fruitList.textContent = "";
    for (const fruit of fruits) {
        const item = document.createElement("li");
        item.textContent = fruit;
        fruitList.append(item);
    }
}

showFruits();

Сначала функция очищает список: если присвоить textContent пустую строку, всё внутри элемента удалится. Затем цикл создаёт по одному li для каждого элемента массива. Когда массив изменился, вызовите функцию снова, чтобы нарисовать список заново:

fruits.push("Банан");
showFruits();

Зачем сначала очищать список? Без этого при каждом вызове все пункты добавлялись бы снова, под уже имеющимися, и страница показывала бы Яблоко, Груша, Яблоко, Груша, Банан.

А зачем нужен массив, если можно добавлять пункты прямо на страницу? Затем, что тогда данные остаются в вашей программе, и с ними можно работать: считать пункты через .length, проверять наличие пункта через .includes() или складывать цены в цикле. В массиве могут лежать и объекты; текст каждого пункта тогда составляется из их свойств, например `${product.name}: ${product.price}`.