5 методов перемещения элементов DOM для фронтенд-разработчиков

// Создаем новый элемент
const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';

// Добавляем в конец родительского элемента
const parent = document.getElementById('container');
parent.appendChild(newElement);

// Перемещаем элемент из одного контейнера в другой
const element = document.getElementById('sourceElement');
const newParent = document.getElementById('targetContainer');
newParent.appendChild(element); // Элемент будет перемещен, а не скопирован

// Создаем новый элемент
const newElement = document.createElement('li');
newElement.textContent = 'Новый пункт списка';

// Получаем родительский элемент и элемент, перед которым будем вставлять
const list = document.getElementById('myList');
const secondItem = list.children[1]; // Второй элемент списка

// Вставляем новый элемент перед вторым элементом
list.insertBefore(newElement, secondItem);

// Вставка элемента на определенную позицию (индекс)
function insertAtIndex(parent, newElement, index) {
if (index >= parent.children.length) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, parent.children[index]);
}
}

// Пример использования: вставляем элемент на позицию 3
const ul = document.getElementById('myList');
const newLi = document.createElement('li');
newLi.textContent = 'Вставлен на позицию 3';
insertAtIndex(ul, newLi, 3);

// Создаем элементы
const div = document.createElement('div');
const span = document.createElement('span');
const textNode = document.createTextNode('Текстовый узел');

// Добавляем все элементы одновременно
const container = document.getElementById('container');
container.append(div, span, textNode, 'И просто строка текста');

// Добавляем элементы в начало контейнера
const header = document.createElement('h2');
header.textContent = 'Заголовок списка';
const intro = document.createElement('p');
intro.textContent = 'Вводный текст';

const list = document.getElementById('taskList');
list.prepend(header, intro);

const targetElement = document.getElementById('target');

// Вставляем содержимое до целевого элемента
const beforeText = document.createElement('p');
beforeText.textContent = 'Перед целевым элементом';
targetElement.before(beforeText);

// Вставляем содержимое после целевого элемента
const afterText = document.createElement('p');
afterText.textContent = 'После целевого элемента';
targetElement.after(afterText, 'И еще текст');

// Заменяем целевой элемент
const replacement = document.createElement('div');
replacement.innerHTML = '<strong>Заменяющий элемент</strong>';
targetElement.replaceWith(replacement, document.createElement('hr'));

// Добавляем строки текста без создания текстовых узлов
const notice = document.getElementById('notice');
notice.append('Важное уведомление: ', 'Не забудьте сохранить данные!');

// Неоптимальный подход — каждая вставка вызывает перерисовку
function addItemsUnoptimized(container, count) {
for (let i = 0; i < count; i++) {
const item = document.createElement('div');
item.textContent = `Элемент ${i}`;
container.appendChild(item); // Вызывает перерисовку на каждой итерации
}
}

// Оптимизированный подход с DocumentFragment
function addItemsOptimized(container, count) {
const fragment = document.createDocumentFragment();
for (let i = 0; i < count; i++) {
const item = document.createElement('div');
item.textContent = `Элемент ${i}`;
fragment.appendChild(item); // Не вызывает перерисовку
}
container.appendChild(fragment); // Только одна перерисовка
}

// Сравнение производительности на 1000 элементах
const container = document.getElementById('container');
console.time('Неоптимизированный');
addItemsUnoptimized(container, 1000);
console.timeEnd('Неоптимизированный');

container.innerHTML = ''; // Очистка для честного сравнения

console.time('Оптимизированный');
addItemsOptimized(container, 1000);
console.timeEnd('Оптимизированный');

// Псевдокод для виртуализации большого списка
function renderVisibleItems(container, allItems, scrollTop, viewportHeight) {
const itemHeight = 30; // Предполагаемая высота элемента списка

// Вычисляем индексы видимых элементов
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(
allItems.length – 1,
Math.floor((scrollTop + viewportHeight) / itemHeight)
);

// Очищаем контейнер
container.innerHTML = '';

// Создаем "проставку" сверху для сохранения скролла
const topSpacer = document.createElement('div');
topSpacer.style.height = `${startIndex * itemHeight}px`;
container.appendChild(topSpacer);

// Добавляем только видимые элементы
for (let i = startIndex; i <= endIndex; i++) {
const item = document.createElement('div');
item.textContent = allItems[i];
container.appendChild(item);
}

// Создаем "проставку" снизу
const bottomSpacer = document.createElement('div');
bottomSpacer.style.height = `${(allItems.length – endIndex – 1) * itemHeight}px`;
container.appendChild(bottomSpacer);
}

// Неоптимально
function updateComplexElement(element, newData) {
element.querySelector('.title').textContent = newData.title;
element.querySelector('.description').textContent = newData.description;
element.querySelector('.image').src = newData.imageUrl;
// ... и еще много модификаций
}

// Оптимальнее в некоторых случаях
function replaceComplexElement(container, position, newData) {
const newElement = document.createElement('div');
newElement.className = 'complex-element';
newElement.innerHTML = `
<h3 class="title">${newData.title}</h3>
<p class="description">${newData.description}</p>
<img class="image" src="${newData.imageUrl}">
<!-- Полная структура элемента -->
`;

const oldElement = container.children[position];
container.replaceChild(newElement, oldElement);
}

// Функция для загрузки и добавления новых элементов списка
async function loadMoreItems(container, page, pageSize) {
// Индикатор загрузки
const loadingIndicator = document.createElement('div');
loadingIndicator.className = 'loading';
loadingIndicator.textContent = 'Загружаем...';
container.appendChild(loadingIndicator);

try {
// Получаем данные с сервера
const response = await fetch(`/api/items?page=${page}&limit=${pageSize}`);
const newItems = await response.json();

// Удаляем индикатор загрузки
container.removeChild(loadingIndicator);

if (newItems.length === 0) {
// Больше нет элементов для загрузки
const endMessage = document.createElement('p');
endMessage.className = 'end-message';
endMessage.textContent = 'Больше нет элементов для отображения';
container.appendChild(endMessage);
return false;
}

// Используем фрагмент для оптимизации
const fragment = document.createDocumentFragment();
newItems.forEach(item => {
const element = createItemElement(item); // Функция создания элемента
fragment.appendChild(element);
});

container.appendChild(fragment);
return true;
} catch (error) {
console.error('Ошибка загрузки данных:', error);
loadingIndicator.textContent = 'Ошибка загрузки. Попробуйте снова.';
loadingIndicator.className = 'loading error';
return false;
}
}

// Использование:
let currentPage = 1;
const itemsContainer = document.getElementById('items-container');
const loadMoreButton = document.getElementById('load-more');

loadMoreButton.addEventListener('click', async () => {
const hasMoreItems = await loadMoreItems(itemsContainer, currentPage, 20);
if (hasMoreItems) {
currentPage++;
} else {
loadMoreButton.disabled = true;
}
});

// Базовый drag-and-drop для сортируемого списка
function initSortableList(listElement) {
let draggedItem = null;

// Обработчики для всех элементов списка
Array.from(listElement.children).forEach(item => {
// Делаем элемент перетаскиваемым
item.setAttribute('draggable', 'true');

// Начало перетаскивания
item.addEventListener('dragstart', function(e) {
draggedItem = this;
setTimeout(() => this.classList.add('dragging'), 0);
});

// Конец перетаскивания
item.addEventListener('dragend', function() {
this.classList.remove('dragging');
draggedItem = null;
});
});

// Обработка зон сброса (те же элементы списка)
listElement.addEventListener('dragover', function(e) {
e.preventDefault(); // Разрешаем сброс

if (!draggedItem) return;

// Находим элемент, над которым находимся
const targetItem = e.target.closest('li');
if (!targetItem || targetItem === draggedItem) return;

// Определяем, куда вставлять: до или после целевого элемента
const targetRect = targetItem.getBoundingClientRect();
const targetCenter = targetRect.y + targetRect.height / 2;

if (e.clientY < targetCenter) {
// Вставляем перед целевым элементом
listElement.insertBefore(draggedItem, targetItem);
} else {
// Вставляем после целевого элемента
listElement.insertBefore(draggedItem, targetItem.nextElementSibling);
}
});
}

// Инициализация сортируемого списка
document.addEventListener('DOMContentLoaded', () => {
const todoList = document.getElementById('todo-list');
initSortableList(todoList);
});

// Добавление/удаление полей в форме
function initDynamicForm() {
const form = document.getElementById('dynamic-form');
const addFieldButton = document.getElementById('add-field');
const fieldContainer = document.getElementById('fields-container');

let fieldCounter = 0;

addFieldButton.addEventListener('click', () => {
fieldCounter++;

// Создаем группу полей
const fieldGroup = document.createElement('div');
fieldGroup.className = 'field-group';
fieldGroup.dataset.fieldId = fieldCounter;

// Создаем элементы полей
fieldGroup.innerHTML = `
<select name="field_type_${fieldCounter}">
<option value="text">Текстовое поле</option>
<option value="number">Числовое поле</option>
<option value="date">Дата</option>
</select>
<input type="text" name="field_name_${fieldCounter}" placeholder="Название поля">
<button type="button" class="remove-field" data-field-id="${fieldCounter}">Удалить</button>
`;

// Добавляем группу в контейнер
fieldContainer.appendChild(fieldGroup);

// Настраиваем кнопку удаления
const removeButton = fieldGroup.querySelector('.remove-field');
removeButton.addEventListener('click', (e) => {
const fieldIdToRemove = e.target.dataset.fieldId;
const fieldToRemove = document.querySelector(`.field-group[data-field-id="${fieldIdToRemove}"]`);
fieldContainer.removeChild(fieldToRemove);
});
});
}

document.addEventListener('DOMContentLoaded', initDynamicForm);

// Делегирование событий для динамически создаваемых элементов
document.getElementById('todo-list').addEventListener('click', function(e) {
// Проверяем, что клик был по кнопке удаления
if (e.target.classList.contains('delete-task')) {
// Находим родительский элемент (li) и удаляем его
const taskItem = e.target.closest('li');
if (taskItem) {
this.removeChild(taskItem);
}
}

// Обработка других событий...
});