0Pricing
Frontend Academy · Урок

Создание и добавление элементов

Используйте createElement, setAttribute, append и remove для динамического создания и изменения структуры DOM.

«Создание и добавление элементов» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

createElement

document.createElement(tagName) создаёт новый элемент в памяти — пока он не находится в DOM. Затем задайте его свойства и добавьте его в дерево.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append и appendChild

parent.append(child) добавляет узел или строку в конец дочерних элементов родителя. appendChild — более старый эквивалент, но append гибче: он принимает несколько узлов и строк.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() добавляет в начало. element.before() вставляет перед элементом. element.after() вставляет после него.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) вставляет HTML в указанную позицию, не заменяя существующее содержимое. Возможные позиции: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) создаёт глубокую копию элемента, включая всех его потомков. Для поверхностной копии передайте false. Это удобно для дублирования элементов шаблона.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild и remove()

element.remove() удаляет элемент из DOM. Более старый метод parent.removeChild(child) тоже работает. На удалённые элементы по-прежнему можно ссылаться в переменных и снова добавлять их в дерево.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) заменяет старый элемент в DOM новым. Это удобнее, чем старый шаблон с replaceChild.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment для пакетной вставки

DocumentFragment — это лёгкий контейнер, которого нет в DOM. Соберите внутри него поддерево, а затем добавьте его одной операцией — это вызывает только одну перерисовку вместо N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

Элемент &lt;template&gt;

Элемент HTML <template> хранит разметку, которая не отображается, пока её не клонируют с помощью JavaScript. Это лучше, чем создавать строки или клонировать видимые элементы.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Установка свойств и атрибутов

Свойства элементов (el.href, el.src, el.value) часто являются самым прямым и производительным способом задать значения. Атрибуты (setAttribute) лучше использовать для пользовательских или ARIA-атрибутов, которым не соответствует свойство DOM.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Как не использовать innerHTML с пользовательским содержимым

Создавая элементы из данных, предоставленных пользователем, всегда используйте методы DOM (createElement, textContent, setAttribute), а не создавайте строку HTML с последующим использованием innerHTML. Никогда не вставляйте пользовательский ввод в строки HTML.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Быстрая проверка

Вам нужно добавить 100 элементов списка в <ul>, не вызывая 100 перерисовок. Какой подход лучше всего?

Повторение: создание элементов DOM

createElement создаёт элемент в памяти. append, prepend, before и after вставляют его в дерево. remove() удаляет элемент. DocumentFragment объединяет вставки для повышения производительности. Элемент