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

Метод createElement, создание элемента

У нас получилось добавить сообщение в конец ленты и сохранить всё, что там было до этого!

Однако каждый комментарий в ленте — это не просто строка, а отдельный элемент. Перед тем, как добавить его в ленту, этот элемент нужно создать.

Чтобы создать новый элемент, воспользуемся методом createElement:

document.createElement('имя тега');

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

// Создаст новый элемент <div> и запишет его в переменную
let newElement = document.createElement('div');

Лента комментариев на нашей странице — это нумерованный список, а каждый комментарий — элемент списка. Поэтому мы создадим элемент li:

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

Создадим новый элемент списка и протестируем результат: скажем JavaScript вывести созданный элемент в консоль.

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

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

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

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

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

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