Как создать элемент и добавить его на страницу

Короткий ответ

document.createElement() создаёт элемент, а append() добавляет его в конец родителя:

<ul id="list"></ul>
<script>
  const item = document.createElement('li');
  item.textContent = 'Buy milk';
  item.className = 'task';
  document.getElementById('list').append(item);
</script>

Список из массива

Создайте элемент для каждого элемента массива и добавьте их все сразу:

<ul id="users"></ul>
<script>
  const users = ['Anna', 'Oleg', 'Maria'];
  const items = users.map((name) => {
    const li = document.createElement('li');
    li.textContent = name;
    return li;
  });
  document.getElementById('users').append(...items);
</script>

Другие позиции

prepend() добавляет в начало, before() и after() ставят элемент рядом с другим:

list.prepend(firstItem);
title.after(subtitle);

Частая ошибка

Добавление элементов через innerHTML += каждый раз пересоздаёт всё содержимое: старые обработчики событий теряются, а текст пользователя может внедрить HTML. Используйте createElement() и textContent.

// bad
list.innerHTML += `<li>${userInput}</li>`;