• Теория
  • Теория

Меняем свойства созданного элемента

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

Элементы, созданные с помощью метода 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>

Вы можете сначала добавить новый элемент на страницу, а потом уже менять ему текстовое содержимое и класс, но тогда браузеру придётся несколько раз перерисовывать страницу. Это неэффективно. Лучше добавлять на страницу уже полностью сформированный элемент.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 18 июня 2024. Всего от 6080 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Условия и создание элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.