Мы научились добавлять в ленту новые элементы при отправке формы! Чтобы они стали похожи на комментарий, который уже есть в ленте, нужно добавить новым элементам подходящий класс.

Элементы, созданные с помощью метода createElement, можно изменять так же, как и любые другие. Мы можем менять их текстовое содержимое, переключать классы и так далее.

// Создаём новый абзац
let newElement = document.createElement('p');

// Меняем текстовое содержимое
newElement.textContent = 'Я новый абзац!';

// Добавляем класс
newElement.classList.add('some-text');

// Добавляем элемент на страницу
parent.append(newElement);

Когда инструкции будут выполнены, на странице появится новый абзац с классом some-text.

<div class="parent">
  <!-- Содержимое элемента parent -->

  <p class="some-text">Я новый абзац!</p>
</div>

У комментариев в ленте должен быть класс user-comment. Добавим его созданному элементу перед тем, как вывести его на страницу. А чтобы элемент ещё больше походил на комментарий, запишем в его текстовое содержимое временный текст-заглушку. Его ещё называют «рыбой». В будущем мы будем использовать данные, которые пользователь ввёл в форму, но для тестирования кода хватит и «рыбы».

Если всё правильно, в ленте появится новый комментарий:

<ol class="comment-list">
  <li class="user-comment">Да ну, бред какой-то…</li>
  <li class="user-comment">Новый комментарий</li>
</ol>