Добавить HTML в контейнер без innerHTML и доп. тегов

Быстрый ответ

Добавляйте элементы в DOM, используя document.createElement и appendChild. Если вам необходимо вставить HTML-строки, не используя innerHTML, воспользуйтесь DOMParser.

Пример:

// Получаем ссылку на наш контейнер
const container = document.querySelector('#container'); 

// Создаем новый div
const elem = document.createElement('div'); 

// Задаем текстовое содержимое
elem.textContent = 'Новое содержимое'; 

// Добавляем элемент в контейнер
container.appendChild(elem);

Хотите посмотреть более изощренный подход? Перейдем к работе со строками!

// Создаем новое HTML-содержимое как объект DOM
const html = new DOMParser().parseFromString('<div>Новое содержимое</div>', 'text/html');

// Вставляем новый элемент в контейнер
container.appendChild(html.body.firstChild);

Изящное добавление контента

Когда вы работаете с динамическим контентом, вам следует учитывать особенности воспроизведения медиа и интерактивность. Вот некоторые методы для более продвинутых пользователей.

Использование insertAdjacentHTML

Метод insertAdjacentHTML вставляет контент рядом с указанным элементом, избавляя вас от нежелательных прерываний в Воспроизведении медиа и избыточной структуры.

Пример:

// Добавляем новый блок непосредственно в контейнер
container.insertAdjacentHTML('beforeend', '<div id="newContent">Гендельф 🧙‍♂️ на вашей стороне</div>');

Подробнее об этом расскажет наш спикер на видео

Мощные возможности DocumentFragment

DocumentFragment действует как невидимый контейнер, который легок и эффективен. Этот подход позволяет создавать DOM-узлы в памяти, а затем добавлять их в документ пакетно.

Пример использования:

// Готовимся добавить новый элемент
let fragment = document.createDocumentFragment(); 

// Добавляем информацию
fragment.appendChild(document.createTextNode('Больше информации')); 

// Вносим изменения в документ
container.appendChild(fragment);

Постепенное добавление элементов

createElement и appendChild идеальны для тех, кто желает иметь полный контроль над созданием и расположением элементов.

// Создаем и добавляем элементы поочередно
for (let i = 0; i < data.length; i++) {
    let item = document.createElement('div');
    item.textContent = data[i];
    container.appendChild(item);
}

Визуализация

Добавление HTML подобно строительству кирпичной стены: мы кладем кирпич крепо за кирпичем, а не перекрашиваем стену целиком.

Стена до: [|🧱|    |    |    |]
Добавляем кирпичи по одному.

let new_brick = document.createElement('bricks');
container.appendChild(new_brick);
Стена после: [|🧱|🧱🧱|🧱🧱|🧱🧱|]

Мы не перекрашиваем всю стену сразу:
innerHTML = "🖌🧱🧱🧱🧱";
А хватит ли краски? 🧐

Добавляйте HTML как профессионал

Для разных задач нужны разные инструменты

Когда требуется добавить множество элементов, важно беречь ресурсы. DocumentFragment может ускорить процесс. insertAdjacentHTML и createElement + appendChild помогут оптимизировать обновление DOM.

Управление событиями

Динамический HTML часто влечет за собой добавление интерактивных элементов. В таких случаях создавайте обработчики событий, чтобы поддерживать интерактивность.

// Отслеживаем события в контейнере
container.addEventListener('click', function(event) {
    if(event.target.matches('.interactive')) {
        // Обрабатываем клик
    }
});

Бережное обращение с макетом

Добавляемые элементы могут заметно влиять на макет. Используйте стили напрямую или с помощью классов, чтобы избежать непредвиденных изменений.

Бережное отношение к производительности

Добавление HTML влияет на скорость работы страницы. Не менее важна и безопасность данных. Используйте DocumentFragment и соответствующие методы для обеспечения эффективности и защиты от инъекций кода.

Полезные материалы

1. Node: метод appendChild() – Web API | MDN — Подробности о appendChild().
2. Чем createElement лучше innerHTML? – Stack Overflow — Причины, почему стоит использовать создание элементов вместо внедрения HTML.
3. .append() – Документация jQuery API – Аналог appendChild для jQuery.
4. Изменение документа — Руководство по модификации документа.
5. <template>: Элемент шаблона содержимого – HTML | MDN — Информация об использовании шаблонов в HTML.
6. JavaScript insertAdjacentHTML и beforeend — Обзор insertAdjacentHTML и его параметров.