Создание и вставка элементов
Создавайте новые узлы с помощью createElement и append.
«Создание и вставка элементов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Создание новых элементов
Вместо записи строк HTML можно создавать элементы в коде. Это предотвращает XSS и даёт настоящую ссылку на элемент, который можно настроить.
createElement
document.createElement создаёт новый отсоединённый элемент. Он существует в памяти, но ещё не добавлен на страницу.
const li = document.createElement("li");
li.textContent = "New item";Настройка перед вставкой
Задавайте классы, атрибуты и содержимое, пока элемент ещё отсоединён. Видимым он становится только после вставки.
const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";append
append добавляет узлы (или строки) как последние дочерние элементы. Он может принимать несколько аргументов.
const list = document.querySelector("ul");
list.append(li);prepend
prepend вставляет узлы как первые дочерние элементы, сдвигая существующие дочерние элементы вниз.
list.prepend(document.createElement("li"));append принимает строки
В отличие от устаревшего appendChild, append может принимать обычные строки и несколько аргументов одновременно.
const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");appendChild
appendChild — классический метод. Он принимает только один узел и возвращает его, тогда как append возвращает undefined.
const node = list.appendChild(document.createElement("li"));insertBefore
insertBefore помещает новый узел перед определённым существующим дочерним элементом, обеспечивая точное позиционирование.
const ref = list.children[1];
list.insertBefore(li, ref);insertAdjacentElement
insertAdjacentElement вставляет элемент относительно другого, используя такие позиции, как перед началом, после начала, перед концом и после конца.
ref.insertAdjacentElement("beforebegin", li);DocumentFragment для пакетной обработки
При добавлении множества элементов сначала создайте их в DocumentFragment, а затем выполните одну вставку. Это сводит к минимуму перерасчёты и работает быстрее.
const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const item = document.createElement("li");
item.textContent = "Row " + i;
frag.append(item);
}
list.append(frag);cloneNode
cloneNode(true) копирует элемент и его потомков, что удобно для создания повторяющихся структур по шаблону.
const copy = li.cloneNode(true);
list.append(copy);Быстрая проверка
Выберите лучший способ.
Итоги
Используйте createElement, чтобы создавать отсоединённые элементы и настраивать их, а затем вставляйте их с помощью append/prepend (разрешены строки и несколько аргументов), appendChild (один узел) или insertBefore/insertAdjacentElement для точного позиционирования. Обрабатывайте множество вставок пакетно через DocumentFragment, а повторно используемые структуры создавайте с помощью cloneNode(true).
Часто задаваемые вопросы
Урок «Создание и вставка элементов» бесплатный?
Да — полный текст урока «Создание и вставка элементов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание и вставка элементов»?
Создавайте новые узлы с помощью createElement и append. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Создание и вставка элементов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изменение текста и содержимого HTML
- Создание и вставка элементов
- Изменение атрибутов и классов
- Удаление и замена узлов