Методы JavaScript для добавления содержимого в документ

Раздел: JavaScript -> Манипуляции с DOM

Основные способы добавления элементов

При работе с DOM часто требуется динамически создавать и вставлять новые узлы. Каждый метод имеет свои особенности, которые следует учитывать.

appendChild - базовый метод, поддерживаемый всеми браузерами. Он добавляет узел в конец списка дочерних элементов родителя. Если узел уже присутствует в документе, он будет перемещён, а не скопирован.

const parent = document.getElementById('container');
const child = document.createElement('p');
child.textContent = 'Новый абзац';
parent.appendChild(child);

Js add (добавление в javascript)

Цель использования: добавление одного узла в конец родителя с гарантированной совместимостью.

Типичные ошибки: попытка добавить один и тот же узел в несколько мест приводит к его перемещению, а не копированию. Для дублирования используйте cloneNode(true).

Как добавить несколько узлов или текст одновременно?

Метод append (современный стандарт) принимает любое количество аргументов: узлы или строки. Строки автоматически преобразуются в текстовые узлы.

const list = document.querySelector('ul');
list.append(
  document.createElement('li'),
  'Текстовый элемент',
  document.createElement('li')
);

Js добавить (добавление в javascript)

Проблема: append не поддерживается в Internet Explorer. Полифилл или использование appendChild с явным созданием текстовых узлов решают эту проблему.

Как вставить элемент перед определённым дочерним узлом?

Метод insertBefore позволяет указать целевой узел, перед которым будет размещён новый элемент.

const parent = document.getElementById('list');
const reference = parent.children[1]; // второй дочерний элемент
const newItem = document.createElement('li');
newItem.textContent = 'Вставленный элемент';
parent.insertBefore(newItem, reference);

Js элементы (элементы dom в javascript)

Ошибка: если reference равен null, элемент добавляется в конец. Но если указать несуществующий узел, возникнет ошибка.

Как добавить HTML-строку в определённое место без потери обработчиков?

Метод insertAdjacentHTML принимает позицию (beforebegin, afterbegin, beforeend, afterend) и строку HTML. Он быстрее innerHTML, так как не пересоздаёт весь контент.

const el = document.getElementById('block');
el.insertAdjacentHTML('afterend', '
Новый блок
');

Js href (атрибут href в javascript)

Внимание: вставляемый HTML не выполняется, но скрипты в тегах script не будут выполнены. Для вставки скриптов нужны другие подходы. Также при вставке большого объёма может снизиться производительность.

Как добавить элемент в начало списка дочерних?

Метод prepend (аналог append, но в начало) также принимает узлы и строки.

const list = document.getElementById('list');
list.prepend('Первый элемент');

Js найти (поиск в javascript)

Совместимость: как и append, не работает в IE. Вместо этого можно использовать insertBefore с первым ребёнком.

Как добавить элемент рядом с другим узлом, а не внутрь?

Методы after и before вставляют узел или строку непосредственно после или перед указанным узлом (как соседние).

const ref = document.querySelector('.target');
const span = document.createElement('span');
span.textContent = 'Новый сосед';
ref.after(span);

Примечание: эти методы также не поддерживаются в IE. Для кроссбраузерной работы используйте insertAdjacentHTML или комбинацию insertBefore и свойств nextSibling.

Кроме того, для массового добавления нескольких элементов без перерисовки рекомендуется использовать DocumentFragment. Он собирает узлы в памяти и вставляет их за одну операцию.

Расширенные примеры и нестандартные случаи

Рассмотрим более сложные сценарии вставки элементов.

Пример 1: Массовое добавление через DocumentFragment

Пример 
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = 'Элемент ' + (i+1);
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

Результат: 100 пунктов списка добавляются за одну операцию, браузер перерисовывает страницу однократно.

Список получит 100 новых элементов.

Пример 2: Вставка большого объёма HTML с сохранением обработчиков

Пример 
const container = document.getElementById('output');
const template = '
Кликни
';
for (let i = 0; i < 10; i++) {
  container.insertAdjacentHTML('beforeend', template);
}
function handleClick(e) {
  alert(e.target.textContent);
}

Результат: десять кликабельных блоков. Обработчик назначается через атрибут, что допустимо, но лучше использовать делегирование.

После выполнения на странице появятся 10 блоков.

Пример 3: Клонирование узла с последующим добавлением

Пример 
const source = document.querySelector('.prototype');
const clone = source.cloneNode(true); // глубокое клонирование
clone.classList.add('variant');
document.body.appendChild(clone);

Результат: появляется копия элемента с классом variant.

Новый элемент добавлен в конец body.

Пример 4: Использование шаблонных строк с innerHTML (осторожно)

Пример 
const data = { name: 'Товар', price: 1500 };
const html = `

  
${data.name}

  
Цена: ${data.price} руб.


`;
document.getElementById('cards').innerHTML += html; // добавление в конец

Проблема: innerHTML переписывает всё содержимое, что уничтожает существующие обработчики и снижает производительность. Для добавления лучше использовать insertAdjacentHTML или append.

Пример 5: Вставка с учётом пространства имён (SVG, MathML)

Пример 
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);
circle.setAttribute('r', 40);
svg.appendChild(circle);
document.body.appendChild(svg);

Результат: в документ встраивается круг SVG.

На странице появится SVG-графика.

Все эти примеры демонстрируют гибкость JavaScript при манипуляции DOM. Выбор метода зависит от конкретной задачи, объёма данных и требований к производительности.

Добавление в JavaScript - comments

En
Js add (javascript)