Получить профессию в Skypro
Вставка HTML-элементов через строку в JavaScript: гайд
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Мгновенное добавление HTML-элемента с использованием JavaScript может быть выполнено так:
// Создаем элемент <div> с текстом "Привет, мир!" и помещаем его в body
document.body.appendChild(Object.assign(document.createElement('div'), {textContent: 'Привет, мир!'}));Для массового добавления элементов использование фрагментов документа является более эффективным:
// Создаем фрагмент документа – это контейнер для элементов
const fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('p')); // VIP-секция
fragment.appendChild(document.createElement('section')); // Зона питания
document.body.appendChild(fragment); // Вот и готов наш большой зал!
Углубленные методы вставки контента
Работа с фрагментами документа
Для добавления нескольких элементов используйте фрагменты документа, чтобы предотвратить ненужные перерисовки страницы:
let fragment = new DocumentFragment(); // Создаем фрагмент для заготовок
fragment.appendChild(document.createElement('ul')); // Покупки
// Добавляем в фрагмент другие элементы
document.getElementById('target').appendChild(fragment); // Все выполнено!Вставка чистого HTML-кода с insertAdjacentHTML
Когда вам требуется вставить необработанный HTML-код напрямую, используйте insertAdjacentHTML:
document.getElementById('target').insertAdjacentHTML('beforeend', '<span>Новый контент</span>'); // Очень удобно!Клонирование и настройка шаблонных элементов
Чтобы облегчить процесс, можно склонировать существующие элементы, настроить их и добавить в документ:
let template = document.getElementById('template').cloneNode(true); // Получаем клон элемента
template.id = 'newId'; // Назначаем новый идентификатор для поддержания уникальности
document.body.appendChild(template); // Добро пожаловать в клуб!Визуализация
Концептуальное представление процесса добавления HTML-элементов при помощи JavaScript:
Представьте каждый HTML-элемент как строительный блок 🏗️.
С JavaScript вы можете:
let newFloor = document.createElement('div'); // 🏗️ Создаем новый блок – этаж
newFloor.innerHTML = 'Новый этаж'; // Эскизируем план этажа
document.body.appendChild(newFloor); // Добавляем этаж, отмечаем это событие!Результат:
До: Здание (body) 🏢 🏢
После: Здание с новым этажом (body) 🏢 🏢 🏗️ <-- Взмах флагом! Отметим расширение территории!
Ваш сайт развивается, также как модульная конструкция, элемент за элементом!
Точное размещение элементов с insertAdjacentHTML
Метод insertAdjacentHTML() позволяет вставлять элементы с хирургической точностью:
'beforebegin': Перед самим элементом. Будьте всегда на шаг впереди!'afterbegin': В начале внутреннего содержимого элемента. Захватывайте лидирующие позиции!'beforeend': В конце внутреннего содержимого элемента. Заботьтесь о запасных позициях!'afterend': После самого элемента. Это ваш последний шанс для действия!
Пример:
// Вставляем контент перед элементом, словно обходя очередь в кафе
targetElement.insertAdjacentHTML('beforebegin', '<p>Параграф добавлен перед элементом</p>');
// Обгоняем. Вставляем контент сразу после элемента
targetElement.insertAdjacentHTML('afterend', '<footer>Новый футер</footer>');Управление шаблонами в скрытом DIV-блоке
Для более эффективного использования шаблонов, размещайте их внутри скрытого div. Это повысит производительность и исключит повторения:
let templateDiv = document.getElementById('hiddenTemplateDiv'); // Обращаемся к контейнеру шаблона
let nodeToClone = templateDiv.firstElementChild; // Берем первый элемент
let clonedNode = nodeToClone.cloneNode(true); // Клонируем его
clonedNode.id = 'newUniqueID'; // Присваиваем уникальный идентификатор
document.body.appendChild(clonedNode); // Представляем клонированный объект!Чуткое создание элементов таблицы
При создании элементов таблицы потребуется особое внимание:
let table = document.createElement('table'); // Торжественно готовим стол
let tbody = table.createTBody(); // Пришло время для "сердца" стола
let row = tbody.insertRow(); // Добавляем строку для разнообразия
let cell = row.insertCell(); // Заполняем ячейку
cell.textContent = 'Текст ячейки'; // Устанавливаем содержимое
document.body.appendChild(table); // Стол к банкету готов!Полезные материалы
- Document: createElement() method – Web APIs | MDN – Изучите искусство создания элементов.
- HTML DOM Document createElement() Method – Подробное руководство по методу
createElement(). - Modifying the document – Станьте мастером манипулирования документами.
- Element: insertAdjacentHTML() method – Web APIs | MDN – Обретите абсолютный контроль над размещением элементов.
- Node: appendChild() method – Web APIs | MDN – Алфавит присоединения узлов в DOM.
- JavaScript DOM HTML – Освойте тайны работы с HTML через innerHTML и другие свойства.