Отлично, мы создали с помощью JavaScript новый элемент списка и вывели его в консоль. Но на странице новый элемент не появился. Почему? Дело в том, что JavaScript не знает, где его разместить. Пока мы ему не скажем, новый элемент будет доступен из скрипта, но в разметке не появится.

Чтобы указать, где должен находиться новый элемент, воспользуемся уже знакомым нам методом append:

// Создаём новый элемент
let newElement = document.createElement('div');

// Находим элемент-родитель
let parent = document.querySelector('.parent');

// Добавляем новый элемент в конец элемента-родителя
parent.append(newElement);

На новостном сайте новые комментарии должны добавляться в конец ленты. Вот что произойдёт, когда мы добавим созданный элемент:

<!-- Исходная разметка -->
<ol class="comment-list">
  <li class="user-comment">Да ну, бред какой-то…</li>
</ol>

<!-- Разметка в браузере после commentList.append(newComment) -->
<ol class="comment-list">
  <li class="user-comment">Да ну, бред какой-то…</li>
  <li></li>
</ol>