Создание элементов

До сих пор вы меняли элементы, которые уже были в index.html. JavaScript умеет и создавать новые. Хороший пример — списки. В HTML список — это элемент ul, а каждый пункт — элемент li внутри него:

<ul id="fruits">
    <li>Яблоко</li>
    <li>Груша</li>
</ul>

Добавить пункт можно в три шага:

const fruitList = document.querySelector("#fruits");

const item = document.createElement("li");
item.textContent = "Банан";
fruitList.append(item);

1. document.createElement("li") создаёт новый элемент li. Пока он существует только в программе, на странице его нет.
2. textContent задаёт его текст.
3. fruitList.append(item) помещает элемент в список, в его конец. Только теперь он появляется на странице.

Теперь в списке три пункта: Яблоко, Груша и Банан. Типичная ошибка — забыть последний шаг: элемент создан, но никто не поместил его на страницу, поэтому его не видно.

Для каждого нового пункта нужен свой createElement(). Элемент может быть на странице только один раз: если вы снова вызовете append() с тем же элементом, копии не появится — элемент просто переместится в конец. Поэтому, если кнопка должна добавлять новый пункт при каждом нажатии, создавайте элемент внутри обработчика.

В интернете вы часто увидите, что для вставки содержимого в элемент используют innerHTML. Не применяйте его с текстом, который ввёл пользователь: он читает текст как HTML, поэтому текст может сломать страницу или даже запустить код, который кто-то в него подсунул. createElement() и textContent всегда показывают текст просто как текст.